Hi guys,

You mention this project is the result of this tutorial (https://strapi.io/blog/build-a-blog-with-next-react-js-strapi-and-apollo) but looking at the front end package.json I cannot see any dependency for Apollo?!

Can you clarify... as I see you use queries throughout to access the /graphQL endpoint in Strapi back end.

I am trying to learn about strapi. So I thought I would follow one of the starter packs.

Using the command
npx create-strapi-starter my-project next-blog
gives the error...

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"^11.0.0" from the root project
npm ERR! peer next@">=10.2.0" from [email protected]
npm ERR! node_modules/eslint-config-next
npm ERR! dev eslint-config-next@"^11.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I have tried setting
npm config set legacy-peer-deps true
but then I get

[develop:frontend] ready - started server on 0.0.0.0:3000, url: http://localhost:3000
[develop:frontend] node:internal/modules/cjs/loader:933
[develop:frontend] const err = new Error(message);
[develop:frontend] ^
[develop:frontend]
[develop:frontend] Error: Cannot find module 'string-hash'
[develop:frontend] Require stack:
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\styled-jsx\dist\stylesheet-registry.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\styled-jsx\dist\style.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\styled-jsx\dist\server.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\styled-jsx\server.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\server\render.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\server\next-server.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\server\next.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\server\lib\start-server.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\cli\next-dev.js
[develop:frontend] - C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\next\dist\bin\next
[develop:frontend] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
[develop:frontend] at Function.Module._load (node:internal/modules/cjs/loader:778:27)
[develop:frontend] at Module.require (node:internal/modules/cjs/loader:1005:19)
[develop:frontend] at require (node:internal/modules/cjs/helpers:102:18)
[develop:frontend] at Object. (C:\cygwin64\home\chris\strapi\my-project\frontend\node_modules\styled-jsx\dist\stylesheet-registry.js:6:

[develop:frontend] at Module._compile (node:internal/modules/cjs/loader:1101:14)
[develop:frontend] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
[develop:frontend] at Module.load (node:internal/modules/cjs/loader:981:32)
[develop:frontend] at Function.Module._load (node:internal/modules/cjs/loader:822:12)
[develop:frontend] at Module.require (node:internal/modules/cjs/loader:1005:19) {
[develop:frontend] code: 'MODULE_NOT_FOUND',

when starting the frontend (the backend seems to start OK).
Is there a dependency resolution that I missing?

Chris

...../s/backend> yarn develop yarn run v1.22.4 $ strapi develop /bin/sh: npm: command not found error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Please help me?

The uikit icons render with the server running after a component file is edited but, they do not render when the page is refreshed.

If you try navigation to an article slug that doesn't exist, you get

Error: Error serializing `.post` returned from `getStaticProps` in "/blog/[slug]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

instead of the 404 page. Is there a way to fix this?

Hi Strapi,

I have installed Strapi version 4 with node v16.9.1 and this theme with yarn, but the content text is not showing, there are no errors on front, browser or backend.

Categories are working and titles too.
Please let me know if you need more information

Hey! I saw that you removed .env.example from the FE source code but I don't think it is bad to let it there. For example we could use the new NEXT_PUBLIC_ prefix.

What do you think?

https://nextjs.org/blog/next-9-4#new-environment-variables-support

I can open a PR if you agree. Have a good day!

Like you do on create-strapi-app
you could add an option like --docker-compose
where ask to users if they want to setup all in docker and add a database on data
and another good idea and options to setup kubernates

Unhandled Runtime Error
TypeError: Only absolute URLs are supported

lib\api.js (2:20) @ fetchAPI

1 | async function fetchAPI(query, { variables } = {}) {

2 | const res = await fetch(${process.env.NEXT_PUBLIC_API_URL}/graphql, {
| ^
3 | method: 'POST',
4 | headers: {
5 | 'Content-Type': 'application/json',

At the Deploy the frontend section of Strapi Starter Next Blog I stuck with Invalid now.json file Provided error prompt like bellow image.

Besides that the article instruct now command but now is deprecated at the time, vercel recommended.

This caused me a lot of time to figure out. I assumed that ISR would be working out of the box with this example. However when I created a new article on a Vercel deployment, I got the following error:

ERROR	Error: Cannot find module '/var/task/frontend/.next/server/pages/article/[slug].js'

This happened when an article was added on the fly. Static regeneration fixed the problem, which indicated that this is a problem with serverless generation only.

I spent a lot of time trying to figure out what might cause this error, with no result... I did not assume that Incremental Static Regeneration does not work on the vanilla starter template. Clearly, I am just starting to explore nextjs, which is why this was hard to figure out - but people who try the starter are expected to be beginners, too.

My suggestion is: either change the code to fallback: "blocking". Or if there is any reason not to do this, please document clearly that "if you want to enable ISR in Next, you have to do these manual changes".

The fallback: "blocking" would be desirable in both the article and the category slug, for completeness.

How can I make pagination work while using getStaticProps? Currently I updated my code using SWR and paginating on the articles component but doesnt look like the ideal solution

https://strapi.io/blog/strapi-starter-next-js-blog

in heroku

from this instruction, https://strapi.io/blog/strapi-online-meetup-4-recap

Hi,

I have religiously followed the instructions to deploy Strapi with Next.js on Heroku and Vercel, respectively.

My Heroku instance works fine, but when deploying to Vercel, either from command-line, or from UI by clicking the button, I get:

> Build error occurred : TypeError: Only absolute URLs are supported at getNodeRequestOptions 

Please advise.

When I changed the strapi image type to multiple .. there is an error.
How can I add the image slider(maybe 3 photos) to the article page?
Thank you.

I have deployed backend on heroku. (used cloudinary to stored images)
And I tried yarn next dev and yarn next build on local.
(I have added NEXT_PUBLIC_STRAPI_API_URL from heroku to .env)

It's working on local.

When I pushed the repo to and tried to deploy on vercel.
(I have added NEXT_PUBLIC_STRAPI_API_URL to Environment Variables.)

So I tried to deploy fronted on heroku.

It's still not working (categories.map or articles.map is not a function.).

Hi Team,

I have Strapi running on localhost:1337
and next.js client running on localhost:3000

One of my articles has content with images. This is a sample image URL

/uploads/ccavene_integration_using_nodejs_express_3_1_011e2d9844.png

Then this article is rendered in Next.js, the broken image is displayed since the full path was

http://localhost:3000/uploads/ccavene_integration_using_nodejs_express_1_2091255f08.png ❌ (which is wrong)
http://localhost:1337/uploads/ccavene_integration_using_nodejs_express_1_2091255f08.png ✔️ (which is rite)

I can parse the articles and relate the /uploads/ with HOST:PORT/uploads/

I wanted to know if there is any solution by Next.js or Strapi