Strapi - Build a Blog Using Strapi and Next.js

Blogs
1

Strapi is the leading open-source composable Content Management System (CMS). It is 100% JavaScript, based on Node.js, and used to build RESTful APIs and GraphQL APIs. It also has a cloud SAAS, Strapi Cloud - a fully managed, composable, and collaborative platform to boost your content velocity!

This is a companion discussion topic for the original entry at https://strapi.io/blog/build-a-blog-with-next-react-js-strapi
1 Like
2

Currently the api have a little changes. Now, is not necessary pass “status” in the query params
" By default, when you fetch articles you will get all articles. Let’s consider you don’t want to expose articles that are in draft or archive status."

export async function getStaticProps() {
  // Run API calls in parallel
  const [articles, categories, homepage] = await Promise.all([
    fetchAPI("/articles"),
    fetchAPI("/categories"),
    fetchAPI("/homepage"),
  ]);

  return {
    props: { articles, categories, homepage },
    revalidate: 1,
  };
}
1 Like
4

Thanks for the heads up @dfloresdev! It will be updated in the next build :slight_smile:

1 Like
5

Hi Maxime,

Thanks for this awesome tutorial… I really enjoyed it.

But I’m a little bit confused about the order of the components, I hope you can clarify it for me.

I see that in the Layout component you render the Nav component first, and the render the children (which include the Seo component, which includes the Head tags).

const Layout = ({ children, categories, seo }) => (
  <>
    <Nav categories={categories} />
    {children}
  </>
)

In the articles page, you use the SEO component as a children of the Layout component.

return (
    <Layout categories={categories}>
      <Seo seo={seo} />

The Seo component contains the Head component which contains the Head tags, like title, meta, etc…, as far as I know, the Head tag and its sub tags should come before the body tag in HTML.

So currently, the page layout will be something like this:

// This coming from Nav component
<div>
      <nav className="uk-navbar-container" data-uk-navbar>
        <div className="uk-navbar-left">
....

Then

// This is coming from Seo component
          <title>{fullSeo.metaTitle}</title>
          <meta property="og:title" content={fullSeo.metaTitle} />
          <meta name="twitter:title" content={fullSeo.metaTitle} />

Shouldn’t the title tag and the meta tags come first before the div’s of the Nav component ?

6

Hi there ! Awesome tutorial, thank you for it !
I just wonder one thing : What is the point of create an “Image” Component instead of using the Next.Js’s native one ?

1 Like
7

There is short error popup when try to click the article because in Card component (./components/card.js) it should use slug instead of id

<Link as={`/article/${article.slug}`} href="/article/[id]">

fix:

<Link as={`/article/${article.slug}`} href="/article/[slug]">

Also in Categories page:

<Link as={`/category/${category.slug}`} href="/category/[id]">

fix:

<Link as={`/category/${category.slug}`} href="/category/[slug]">
1 Like
8

To display the article content use children instead of source.

<ReactMarkdown children={article.content} escapeHtml={false} />

1 Like
9

Hello there. I really liked the post and the tutorial of making the blog with Strapi and Next.
I had only one issue concerning the SEO. If we get the data from Strapi with getStaticProps we are creating for example article.html that contain all the JSON from the data received and article.js which later for example populates the SEO component with the data. Sooo when we inspect the page with Chrome View Source we do not see the updated title, description and all the SEO that we want to see. And if we try to share the link somewhere (FB Messenger, Slack) it gets no title, desc or/and shareImage. Do you think there is some workaround? Thanks…

1 Like
10

Thank you for the tutorial. It has been a great help in getting started with Strapi/NextJS.

The way that the folder structure is setup for the Articles, the URL ends up having the following structure, www.domain.com/article/slug. Is there a way to create the URL without using the article folder in the URL? So www.domain.com/slug .

Thank you.

1 Like
11

the command to create strapi blog backend using template,
yarn create strapi-app backend --quickstart --template https://github.com/strapi/strapi-template-blog
does not work.

Instead, try using yarn create strapi-app backend --quickstart --template blog

Ref: Error creating project with template #11

1 Like
12

Thanks, @rejo for this!

Every blog tutorial will be updated during this quarter with v4!

1 Like
14

How to resolve it:

# Server Error
TypeError: Cannot read properties of undefined (reading 'url')
export function getStrapiMedia(media) {
const imageUrl = media.url.startsWith("/")
1 Like
15

Additional info about my problem

image
image1708Ă—1314 252 KB

1 Like
16

Check your files like favicon or shareImage. You forgot to upload it in strapi.

1 Like
18

Hello! I did exactly as in the article. Tell me what it could be and how to fix it

image
image1004Ă—257 21.6 KB

2 Likes
19

Hi Maribelll! This was a node problem so you have to rollback to node 16.14.0
First of all, make sure you’re in your frontend folder!
Next, in your terminal type in:

node install 16.14.0

That should solve the problem! Hope this helps

3 Likes
20

Thank you for the great tutorial! This helped me a lot!

22

Thank you very much, my problem was solved!

2 Likes
23

It helped me a lot, Thanks a lot for sharing here.
Dedicated ReactJS Developer

1 Like