Bug report for project page and project/[slug] page

[liuxuan30]

Hi there,

First of all, Love your design.

I'm new to web development and react, now I'm trying to develop a personal site using your template from vercel.

I found two issues:

1. when trying to open projects/page or http://localhost:3000/projects, it will likely to give error, especially when you try to refresh:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <article> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
article
a
LinkComponent
./node_modules/next/dist/client/link.js (100:23)
div
Card
./app/components/card.tsx (26:11)

2. for projects/[slug] page, like /projects/planetfall, when click on the card, it also throws error (and sometimes can load the page),

error - Page changed from static to dynamic at runtime /projects/planetfall, reason: no-store fetch https://evolving-cougar-30891.upstash.io /projects/[slug]
see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
    at globalThis.fetch (/Users/xuanliu/react/bio/MySite/node_modules/src/server/app-render.tsx:408:23)
    at HttpClient.request (webpack-internal:///(sc_server)/./node_modules/@upstash/redis/esm/pkg/http.js:94:29)
    at GetCommand.exec (webpack-internal:///(sc_server)/./node_modules/@upstash/redis/esm/pkg/commands/command.js:55:37)
    at PostPage (webpack-internal:///(sc_server)/./app/projects/[slug]/page.tsx:39:19) {
  page: '/projects/[slug]'

I tried to use

export const dynamic = "force-dynamic"

or

export const dynamic = 'force-dynamic'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'

from https://beta.nextjs.org/docs/api-reference/segment-config

seems also not working.

I'm trying to understand what's wrong and this, but seems I need your help or, you could kindly look into it.

I basically changed nothing from your code, just yarn install and yarn dev, it will throw above error.

I also tried to downgrade to next.js 3.1.6, seems the same issue.

[liuxuan30]

I came across https://github.com/vercel/next.js/issues/44998 and using next.js 3.1.1 on my side indeed removes the second issue (using yarn dev). However, yours is using 3.2.4.

The first issue remains on 3.1.1 still though. Using 3.1.1 also lacks Metadata type, so I still hope we can fix this on 3.2.4

[liuxuan30]

running 'next dev' (I use yarn dev basically) looks like give totally different output, it will remove below

Unhandled Runtime Error
Error: Dynamic server usage: no-store fetch https://evolving-cougar-30890.upstash.io/ /projects/[slug]

but adding new:

error - Error: Cannot find module 'next/dist/server/app-render/get-segment-param.js' Require stack:

• /Users/react/demo/chronark.com/.next/server/app/projects/[slug]/page.js at ../../server/app-render/get-segment-param (/Users/react/demo/chronark.com/.next/server/app/projects/[slug]/page.js:55:18) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42) at webpack_require (/Users/react/demo/chronark.com/.next/server/webpack-runtime.js:33:42)

[liuxuan30]

it seems

export async function generateStaticParams(): Promise<Props["params"][]> {
	return allProjects
		.filter((p) => p.published)
		.map((p) => ({
			slug: p.slug,
		}));
}

is kind of confusing, what's the purpose here to get a static slug? I do see

export default async function PostPage({ params }: Props)

could get the slug as well

Shall we delete generateStaticParams() here?

I commented it out, and seems PostPage still could get a valid slug? even with "http://localhost:3000/projects/upstash-cli" directly, without navigation.

Not sure what's going on here.

[chronark]

generateStaticParams will build all pages statically at build time, if you omit it, then they will be built only when requested

[liuxuan30]

generateStaticParams will build all pages statically at build time, if you omit it, then they will be built only when requested

but then how to deal with the errors? worth mentioning next 3.1.1 has no issue. So I'm not sure how this should be handled.

[chronark]

Hmm I didn't notice the errors tbh, I'll check it out this week

[daallgeier]

Actually; i believe these are connected? https://github.com/chronark/chronark.com/issues/14

[warifp]

Yay. I found the answer after 2 days of no sleep, delete dir generate ".contentlayer" and run again "pnp run build".

[LucasBonafe]

Hmm I didn't notice the errors tbh, I'll check it out this week

I'm having the same problem:

I believe they are related to the rendering of MDX files:

#42 is the answer!