Strapi - Build a blog using Strapi and Next.js

Thank you for the tutorial, it is great and this is one of the reasons that i love Strapi and always recomended it to other devs. This is becoming the best headless cms by far on the net!.
I have 1 question, i followed the tutorial and everything is working correctly. But how to move the whole blog project to a basePath of ‘/blog’, and leave the homepage a standard landing page (and the ‘/en’ or '/de/ will not affect it).

Basically i want to have a standard landing page and only if the user clicks blog the will then execute the blog project with the language middleware?

I tried adding basePath: ‘/blog’, in the next.config.js, but its not doing the job.

Btw i did it with NextJS13, the new tutorial.

Thanks

Also when you try to build the project after completing the tutorial it crashes, with the prerender-error:

Error occurred prerendering page “/de/markdown-example-post/markdown-example-post”. Read more: prerender-error | Next.js

And all of the other pages

Check out this article Introducing the New Strapi Starter with Next.js 13, Tailwind, and TypeScript for the complete version of the Next.js app. The blog section is under the /blog path. Check out the demo here

Please provide more information

Hello. I am having an issue. How to make the Media Type images work in production (uploaded to my aws server) after following the tutorial?

It is working in local environment and i am getting all the images for my articles, but once i upload to my production server, i can not get them and i see they are not present in a /uploads directory.
I have added plugins.js file in /config
module.exports = ({ env })=>({
upload: {
config: {
providerOptions: {
localServer: {
maxage: 300000
},
},
breakpoints: {
xlarge: 1920,
large: 1000,
medium: 750,
small: 500,
xsmall: 64
},
},
},
});
but this is not helping.

Can i please get some guidance for this issue?

Thanks

actually i saw why, the uploads folder was in .gitignore so the images never made it to the server. But i do wonder if we store the images in aws s3, how would this line need to be changes in order to get the images from the new s3 location
const imageUrl = getStrapiMedia(
article.attributes.cover.data?.attributes.url
)

How to resolve it:
Failed to compile
./i18n-config.ts
Error:
× Expected ‘{’, got ‘Locale’
╭─[/Sites/blog-strapi/frontend/i18n-config.ts:3:1]
3 │ locales: [‘en’, ‘de’, ‘cs’],
4 │ } as const;
5 │
6 │ export type Locale = typeof i18n[‘locales’][number];
· ──────
╰────

Caused by:
Syntax Error

1 Like

Getting below error while import blog data.
error: [FATAL] Invalid schema changes detected during integrity checks (using the strict strategy). Please find a summary of the changes below:

  • api::category.category:
    • attributes.slug.targetField exists in source schema but not in destination schema
  • api::page.page:
    • attributes.seo exists in source schema but not in destination schema
    • options.increments exists in destination schema but not in source schema
    • options.timestamps exists in destination schema but not in source schema
    • attributes.metadata exists in destination schema but not in source schema
      Import process failed.

Which version of Strapi did you use?

I have the same issue

I have the same issue Naveen_Gupta and i use Strapi 4.10.4

[2023-10-17 15:45:57.748] error: [FATAL] Invalid schema changes detected during integrity checks (using the strict strategy). Please find a summary of the changes below:

  • api::category.category:
    • attributes.slug.targetField exists in source schema but not in destination schema
  • api::page.page:
    • attributes.seo exists in source schema but not in destination schema
    • options.increments exists in destination schema but not in source schema
    • attributes.metadata exists in destination schema but not in source schema
      Import process failed.
      error Command failed with exit code 1.

I want to follow the official tutorial Build a blog with Next (React.js) and Strapi

Bumping this, have the same issue. Followed the tutorial to the “run dev” step and now fail at the build.

Hi guys, I was trying the follow the tutorial and I hit the same issue with data import as mentioned by Naveen_Gupta and tonyfrogetdev:

error: [FATAL] Invalid schema changes detected during integrity checks (using the strict strategy). Please find a summary of the changes below:
- api::page.page:
  - attributes.seo exists in source schema but not in destination schema
  - options.increments exists in destination schema but not in source schema
  - options.timestamps exists in destination schema but not in source schema
  - attributes.metadata exists in destination schema but not in source schema

I noticed that the seed-schema.tar and seed-data.tar.gz files comes from different github repositories and they probably diverged. If I try to download both files directly from Marktawa github then import passes successfully.

I hope that will help you to overcome the issue.

1 Like

Thank you for this.