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.
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,
};
}
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]">
To display the article content use children instead of source.
<ReactMarkdown children={article.content} escapeHtml={false} />
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…
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.
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
How to resolve it:
# Server Error
TypeError: Cannot read properties of undefined (reading 'url')
export function getStrapiMedia(media) {
const imageUrl = media.url.startsWith("/")
Check your files like favicon or shareImage. You forgot to upload it in strapi.
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
Thank you for the great tutorial! This helped me a lot!
Thank you very much, my problem was solved!