Strapi - Build a blog using Strapi and Next.js

Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.


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

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,
  };
}

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

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 ?

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 ?

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]">