My GitHub repo was created, and it connected and deployed to Vercel successfully, and I can view the sample blog running on the provided Vercel URL. It looks great.
But after I cloned the repo down to my local, and ran npm install and npm run dev, I was unable to view the blog at localhost:3000. At first I received an error suggesting that the next.js version was old, so I ran npm install next@latest which took care of that error.
But now when I run the app I receive this error:
Error: Invalid revalidate value ānullā on ā/ā, must be a non-negative number or false
The error points to line 26 in the file lib/datocms.js, which is a fetch call to the Datocms graphql endpoint.
Since I have followed the demo steps exactly and havenāt modified anything else, Iām not sure where to go from here. Is this demo still valid or am I wasting my time? Iād love to get this working as the workflow seems pretty promising.
Hmm, it seems to work for me here (on the default Next version). Did you remember to set the env vars by making an .env.local file, copied from .env.local.example, and set your API keys there?
If that wasnāt the issue, could you please provide a screen recording or some screenshots with whatever errors you see?
The Next.js version warning is normal, since that particular blog demo is still on Next 13. I wouldnāt recommend force-upgrading that to v14 or 15 yet (you can try it, I just donāt know if it works, since not every Next upgrade is automatically backward-compatible without changes).
We donāt have a Next 15 one yet. Even though Vercel released it to production, it still uses a pre-release version of React 19 and that causes issues with several dependencies (both ours and third-party) because itās a release candidate and that messes with SemVer in package.json. Some customers have tried it with mixed success, but I wouldnāt recommend it yet. Next 14 should work fine and offers most of the same features.
Thanks for your quick reply. Your suggestions led me in the right direction but there are a couple things in the example docs that seem to be incomplete or not quite accurate, so Iāll describe them for you below.
First, I reverted Next.js back to 13.4.7 as it was originally in the demo repo. I have no personal preference regarding the version.
Then I noticed that the demo README had instructed me to create a file called .env, not .env.local as you suggested. So I renamed it.
Also in the demo README it says to obtain the token from under Read-only API token in the settings for the project inside Datocms. But this token did not work, perhaps because all the Permission toggles for that token were disabled (greyed out) in the interface and could not be enabled.
But I noticed a setting for GraphQL API Token which has the Permissions toggles enabled. So I tried copying that token into my .env.local instead, and then I was able to npm run dev and view the site at localhost:3000.
I also had to go into Vercel and change the NEXT_DATOCMS_API_TOKEN environment variable to that same GraphQL API Token before I was able to redeploy the app on Vercel successfully.
Iām not sure if these discrepancies happened because the Datocms interface has changed since the demo docs were created in 2023, or if I have done something in an unconventional way, but it seems I can now move forward.
Glad you got it working! Welcome to Dato, and please feel free to ask anytime something comes up Hope you like our service.
And sorry about the errorsā¦ that is an older demo, and things have changed since it was first released. We shouldāve been better about keeping the readme updated.
Fixed!
Thatās odd; it should work. I just tried on mine. Is it possible a char was missed or an extra whitespace was added? I wouldnāt worry about it too much if you already got another key working, but if Iād be happy to keep troubleshooting it with you if itās an issue.
The permissions were all greyed out for that key because thatās one of the default keys (alongside the full access one). You can regenerate it but you cannot modify its permissions. You can always create new roles & keys as needed, though, like with the example GraphQL-only one.
Thatās really weird. I just tried again, starting from the āDeploy DatoCMS Starterā button, then choosing Vercel, then letting it create a repo, then added the DatoCMS integration (still in Vercelās setup). Then it built and deployed the site: https://nextjsblogtest-ebon.vercel.app/ I did not have to manually look at, copy, or change any API keys at all.
Again, Iām not sure what happened thereā¦ we can look into it more if youād like, but if it was just a fluke, I wouldnāt worry about it too much. Itās not something we have heard other reports of (so far).
Thank you for looking further into this, I appreciate it. Things are working for me now and I am moving forward, so I donāt think thereās any need to investigate further. Perhaps I did something unusual or have a different setup somewhere, Iām not sure, but since the GraphQL token is working for me Iām happy to keep it.
Hope you like our service.