Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams #45235

sroussey · 2023-01-24T20:22:40Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.3.0: Thu Jan  5 20:53:49 PST 2023; root:xnu-8792.81.2~2/RELEASE_X86_64
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.25.1
    Relevant packages:
      next: 13.1.6-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

https://github.com/sroussey/test-build/tree/generateStaticParams

To Reproduce

git clone https://github.com/sroussey/test-build/tree/generateStaticParams
npm i
npm run build

Notice the extra stuff in build output in the terminal from a console.error. It is showing the parameters during the build -- and they are the values of id, but instead the encoded string [id] as `` as a literal!

> build
> next build

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build  
info  - Compiled successfully
info  - Linting and checking validity of types  
info  - Collecting page data  
[    ] info  - Generating static pages (0/9)AppTestDetailPage { params: { id: '%5Bid%5D' }, searchParams: { id: '[id]' } }
TestDetailPage { params: { id: '%5Bid%5D' }, searchParams: { id: '[id]' } }
info  - Generating static pages (9/9)
info  - Finalizing page optimization  

Route (app)                                Size     First Load JS
┌ ○ /app                                   18.2 kB        84.4 kB
└ ○ /app/[id]                              136 B          66.3 kB
+ First Load JS shared by all              66.2 kB
  ├ chunks/17-ae78dad648f5acd8.js          64.3 kB
  ├ chunks/main-app-207ff98d5eeefba6.js    205 B
  └ chunks/webpack-23701e5bacce31e3.js     1.65 kB

Route (pages)                              Size     First Load JS
┌ ○ /                                      808 B          83.4 kB
├ ○ /404                                   179 B          80.7 kB
├ ○ /pages                                 812 B          83.4 kB
└ ● /pages/[id] (479 ms)                   772 B          81.3 kB
    ├ /pages/test
    ├ /pages/apple
    └ /pages/orange
+ First Load JS shared by all              80.6 kB
  ├ chunks/main-7b8cedc42f52dbe7.js        78.7 kB
  ├ chunks/pages/_app-5841ab2cb3aa228d.js  192 B
  └ chunks/webpack-23701e5bacce31e3.js     1.65 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Instead of the page being generated three times with the values of ['test','apple', 'orange'] the AppTestDetailPage is instead called twice (btw, if the array of values from generateStaticParams is longer, it always gets called exactly twice, regardless) with arguments of { params: { id: '%5Bid%5D' }, searchParams: { id: '[id]' } }.

Describe the Bug

In version 13.1.1 there is no output at all from console.error in AppTestDetailPage. It is never called. This bug where it gets sent bad data started in 13.1.2.

If you put in export const dynamic = 'force-dynamic' the issue goes away (as expected). I want 'force-static' or 'auto' so the app pages get rendered at build time.

At this point, I have somewhat gone through related issue #45220.

Now the bigger deal... I don't think the app pages are pre-rendered at build time at all.

The big clue is that the AppTestDetailPage's console messages are not generated at all for the values found in generateStaticParams.

The other clue is that the build output in the terminal shows the sub-pages for the pages directory, but nothing like that for the exact same thing done in the app directory.

For pages:

└ ● /pages/[id] (608 ms)                   772 B          81.3 kB
    ├ /pages/test
    ├ /pages/apple
    └ /pages/orange

but for app:

└ ○ /app/[id]                              136 B          66.3 kB

There is no /app/test, /app/apple, or /app/orange.

Another clue is in .next/prerender-manifest.json -- you can find /pages/apple but not /app/apple

The next clue is looking at .next/server/pages and you see apple.html etc. But when you look in .next/server/app there are no such html files.

Expected Behavior

I don't expect garbage data ({ id: '%5Bid%5D' }) to be passed to the pre-rendered page
I expect the pages to be pre-rendered

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

sroussey · 2023-01-24T20:23:58Z

@vattenapa hopefully this will get a second look

sroussey · 2023-01-24T20:25:12Z

A screenshot of .next/server to help in the explanation:

sroussey · 2023-01-24T20:29:23Z

And for the build output in the terminal

FluxCapacitor2 · 2023-01-24T21:02:13Z

Please try moving your generateStaticParams() method from app/app/page.tsx into app/app/[id]/page.tsx. Also, you will have to slightly change the structure. Currently you have:

export const generateStaticParams = async () => {
    return ['test','apple', 'orange'];
};

But you have to modify it to look like:

export const generateStaticParams = async () => {
    return [
        {id: 'test'}, {id: 'apple'}, {id: 'orange'}
    ]
};

because the id is passed as a prop to the component.

sroussey · 2023-01-24T21:37:01Z

OK, now my real (well, for fun) next site is generating 10000 pages again. Thanks!

For anyone that finds this, this is the fix:
https://github.com/sroussey/test-build/pull/1/files

It looks like things are far closer to the pages than I thought.

Might be valuable to to flag a page that exports generateStaticParams but is not itself in a folder with [] in the name.

sroussey · 2023-01-24T22:21:52Z

On my real (no work) site, after the fixes, I still see one { name: '%5Bname%5D' } getting put in. I only noticed because I should have a record for everything that gets sent, and write an error when that is not the case.

Is there a way to track this down? A way to have next use non-minified files because the trace is ugly:

Trace
    at UnderwriterDetailPage (/Users/steve/Code/embarc/.next/server/app/dashboard/capital/underwriter/[name]/page.js:603:17)
    at ae (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:99:272)
    at ae (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:104:142)
    at Z (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:91)
    at be (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:107:98)
    at de (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:106:424)
    at Z (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:222)
    at ae (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:386)
    at Z (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:91)
    at Zd (/Users/steve/Code/embarc/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:98:314)

sroussey · 2023-01-24T22:29:04Z

Oh, never mind. I have another that is dynamic only but not marked as such, and there is no generateStaticParams but it does get generated since it is not marked as dynamic only, and I guess sending that dummy data is a way to tell that page something?

FranciscoMoretti · 2023-02-09T13:05:14Z

What about when generateStaticParams returns an empty array and the page is not marked with:

export const dynamic = 'force-dynamic'

What's the expected behavior in that case?

lechinoix · 2023-02-09T13:31:34Z

@FranciscoMoretti I have the same problem and it addind export const generateStaticParams = async () => [] does not fix the problem, export const dynamic = 'force-dynamic' does

Edit : It is pretty annoying because I cannot deploy to Vercel without having to filter out this garbage value

lechinoix · 2023-02-09T14:30:51Z

This condition seems really confusing to me: https://github.com/vercel/next.js/blob/canary/packages/next/src/build/index.ts#L1288-L1292

I would say we never want to add a Dynamic route page in the appStaticPaths. I would change the condition to :

if (
  !isDynamicRoute(page) &&
  !workerResult.prerenderRoutes?.length &&
  workerResult.appConfig?.revalidate !== 0
) {

With this the build seems ok on my side

ijjk · 2023-02-09T17:36:12Z

Closing as a duplicate of #44998 and #45515

github-actions · 2023-03-12T00:03:58Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

sroussey added the bug Issue was opened via the bug report template. label Jan 24, 2023

sroussey changed the title ~~Page being prerendered with broken parameters~~ Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams Jan 24, 2023

balazsorban44 added the area: app label Jan 27, 2023

lechinoix mentioned this issue Feb 9, 2023

fix(build): Fix static generation for app directory dynamic routes #45758

Closed

3 tasks

ijjk closed this as completed Feb 9, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams #45235

Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams #45235

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

FluxCapacitor2 commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

FranciscoMoretti commented Feb 9, 2023

lechinoix commented Feb 9, 2023 •

edited

Loading

lechinoix commented Feb 9, 2023 •

edited

Loading

ijjk commented Feb 9, 2023

github-actions bot commented Mar 12, 2023

Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams #45235

Page being prerendered with broken parameters, and pages in app dir not actually pre-prendered even with generateStaticParams #45235

Comments

sroussey commented Jan 24, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

FluxCapacitor2 commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

sroussey commented Jan 24, 2023

FranciscoMoretti commented Feb 9, 2023

lechinoix commented Feb 9, 2023 • edited Loading

lechinoix commented Feb 9, 2023 • edited Loading

ijjk commented Feb 9, 2023

github-actions bot commented Mar 12, 2023

lechinoix commented Feb 9, 2023 •

edited

Loading

lechinoix commented Feb 9, 2023 •

edited

Loading