404 on official starter example - Next.JS + Prismic

When I follow this repo, I get a 404 on the blog posts. It's really irritating that the first, official and most basic demo of Prismic doesn't work. I really want to use Prismic, but this doesn't really inspire confidence or trust in the framework.

Here is the result when I use the "Deploy" button on the repo, and use Vercel to deploy from a template:

The home page works:
https://elenta-landing-7abx644h5-stultus-studios.vercel.app/
But the blog posts 404s:
https://elenta-landing-7abx644h5-stultus-studios.vercel.app/posts/jane-austen

It's the same result when I use yarn create next-app --example cms-prismic cms-prismic-app and then push to GitHub, and then use Vercel to deploy:

https://elenta-landing-local.vercel.app/

However, I noticed that when I run the build locally, using yarn dev , clicking on a blog post title from the homepage, in order to access the blog post does nothing. Maybe this is causing the issue? However, if I control click, or manually paste the URL into the address bar, the blog post is displayed properly, without any 404s.

I'm having the exact opposite of this issue on another one of the starters.

I've followed the guide exactly, but it's quite confusing. On Step 4, it says "Now that the pages for your blog post documents are accessible". However, Step 3 makes no indication of how to actually access a particular blog post.

If I implement Step 4, and click the blog post title link from the home page, then the blog post loads. However, if I refresh this blog post, then it 404s. It also 404s, if I paste the URL in and try to load it.

As you can see, this is the exact opposite problem that I described at the end of my last post, where I said that clicking the blog title didn't work, but manually pasting the URL did work.

EDIT: This person appears to have had the exact same issue: 404 when reloading a URL with nextjs + server side rendering

Hi Conway,

Welcome to the community!

Unfortunately, I can't speak for any issues that you might be having with the above examples, because these aren't as you suggested the official sample projects and the final article you shared is quite outdated.

The easiest place to start would be one of the example projects in our documentation, you will be able to get a sample project up and running quite quickly with the Prismic CLI and we can assist you from there with any deployment questions you might have.

Thanks.

I'll also have someone from the team check out the article and examples you shared above to see who owns them and if we can get them updated :slight_smile:

I see, appreciate the response!

I also tried the non-Slice Machine version that you linked, but I was also having issues with that. It appears the CSS isn't loading?

https://elenta-web.vercel.app/

Also regarding final article I linked, it did seem to be relatively recent, but the repo looked very old.

Hmm strange I'll look at that CSS issue now and for the article, I'm going to find out who's in charge of editing that.

So this was something one of the team worked on for the blog example:

We'll move to update the other examples right away. In the mean time you can fix your styling issue by creating an _app.js like shown in this part of the PR:

https://github.com/prismicio/nextjs-blog/pull/28/commits/934284be93d2ab30f36c70e46acb1c5e0b471982