[NEXT-1030] output: 'export' with use client in dynamic routes doesn't work

[qpre]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.32
      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), Static HTML Export (output: "export")

Link to the code that reproduces this issue

https://github.com/qpre/next-app-dir-dynamic-with-static-export

To Reproduce

• run yarn install
• run yarn build
• open the out folder and see that static pages are rendered but /toto/[toto].html is missing, based on the docs it should be exported.

Describe the Bug

static routes are exported but the ones with dynamic params are not.

Expected Behavior

based on the docs dynamic routes using 'use client' should be exported.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1030

[ivoiv]

Can confirm.
I'm still trying to find a version in which this actually works.

The .js files for the dynamic pages are actually in the out/_next/static/chunks/app folder but the root index just doesn't do any routing to them when the page is requested.

[klcantrell]

I pulled down the repro project and upgraded it to 13.3.1-canary.7. In addition to the issues described above, I notice that next build outputs the dynamic route as server-side rendered:

Route (app)                                Size     First Load JS
┌ ○ /                                      178 B          80.2 kB
├ ○ /about                                 178 B          80.2 kB
├ ○ /toto                                  141 B          74.7 kB
└ λ /toto/[toto]                           736 B          75.3 kB        <-- here 
+ First Load JS shared by all              74.5 kB
  ├ chunks/2443530c-d36173516156a79f.js    50.5 kB
  ├ chunks/961-410119e98d707b91.js         22.2 kB
  ├ chunks/main-app-4fd98d23d091d9e6.js    213 B
  └ chunks/webpack-8074fabf81ca3fbd.js     1.61 kB

Route (pages)                              Size     First Load JS
─ ○ /404                                   178 B            86 kB
+ First Load JS shared by all              85.8 kB
  ├ chunks/main-c0915425be0ab499.js        84 kB
  ├ chunks/pages/_app-c544d6df833bfd4a.js  192 B
  └ chunks/webpack-8074fabf81ca3fbd.js     1.61 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

[qpre]

The issue is still present in the latest canary (13.3.1-canary.12 at the time of writing).

My only interrogation is if it is on the roadmap for 13.3.1 or if we should just find another way until the subject comes up in vercel's roadmap (which would be perfectly fine seeing the amount of work they put in the new features at the moment, but maybe the beta docs should be updated as to not mislead someone who would invest time in trying this feature :)).

[stefanullinger]

Hi, I am also running into this issue here.
Thanks for looking into it, @styfle!

[styfle]

I confirmed this is still a bug. Feel free to create a PR with a test. Otherwise I will come back to this in a couple weeks 👍

[qpre]

thanks for the update @styfle ! looking forward for this !

[kneza23]

Hi, we are having the same problem, it treats dynamic route as it does not exist and redirects to root page.

Temporary fix (but ugly one) is to use useSearchParams and instead of item/123 to use item?id=123

[re-thc]

This still fails as of 13.4.0. At least there is an error now.

> Build error occurred Error: invariant: Undefined export worker for app dir, this is a bug in Next.js.

[hopedope]

Confirmed that it is failing on 13.4.0 for me too. Looks like there is an issue opened for this new error: #49059

[qpre]

updated the reproduction repository to the latest 13.4.2-canary.3 .

[ytsruh]

It would be nice to get some commentary on this issue. Next is now the official way to build React apps yet this quite basic functionality doesn't function. Until this is resolved I think either the NextJS docs should be updated OR React should be updated to reflect that this is not currently a viable option.

[qpre]

hey @ytsruh, a few points to be made here:

• export does work with pages directory if you really to use it right now,
• NextJS is a recommended way to build react apps,
• SPA's aren't really the main target for NextJS.

AppDir brought a lot of deep changes, hence some issues remaining, and if you'd look at the commit logs and their content you'll see how much work is put into it at the moment. (and might not be that passive/aggressive in deprecating those people's open source and free work.)

that said, if you read this thread, a maintainer looked into the issue and made a commentary two weeks ago saying they would come back to the issue in about two weeks, so I guess they will get back to it soon.

[ytsruh]

OK this has clearly been misinterpreted. If I came across as either passive or agressive that was not my intent. I think my comment was more toward the React team than Next - eg if something is not ready it should be put in the official docs.

To be clear, I have absolutely no issue with Next having these issues, it is to be expected. However that is not in keeping with it being the first recommended way of starting a React project when, combined with the App Router now being stable & the preferred way of starting a Next project. This issue addresses a very basic React use case.

This is probably not the best place for further discussion. If I've offended anybody with my last comment then either reach me on Twitter (the_chrishurst) or in this discussion that I started.

[nareshbhatia]

I created a sample app to demonstrate the workaround suggested by @kneza23 (using query parameters):

https://github.com/nareshbhatia/nextjs-nested-layouts

I have a couple of questions:

1. When the query parameters change, is it considered a new page and is the entire page re-rendered? The console.logs in my app seem to suggest that.
2. When the page is re-rendered, I don't see an API call to fetch the list on the LHS. I only see the call to fetch the detail on the RHS. This is confusing. If the entire page is re-rendered I was expecting to see both API calls.

[luminus-xd]

I think this is a basic and very important feature for creating a static site and should be mentioned in the documentation.

[crs1138]

To sum up all the previous posts:

1. Am I right to understand that exporting dynamic routes as static pages currently does NOT work with the App Router?
2. Is the preferred solution to stick with the Pages Router for these pages for now?

[crs1138]

I mean, I'm trying to achieve what is described in the documentation Deploying > Static Exports > Deploying but none of the pages with [slug] are exported as HTML.

[MatinAniss]

This is still a issue as of next 13.4.12 (but using Page router which people seem to say works but doesn't), the working alternative is to use query parameters instead of dynamic routes. A bit annoying.

[ides15]

Has anyone replaced Next.js routing with another router like react-router-dom? Not sure if it's even possible to disable the filesystem routing.

[mingyeungs]

Encountered the same problem and came up with a workaround (**edit: only works for static slugs as @durchanek mentioned).

Problem

/* /app/test/[slug]/page.jsx */
'use client'
import { useState } from 'react'

const ClientPage = ({ params }: { params: { slug: string } }) => {
  const [value, setValue] = useState(params.slug)
  return (
    <div>
      <p>foo is [{ value }]</p>
      <button type="button" onClick={ () => setValue("foo") }>Set foo</button>
    </div>
  )
}

export function generateStaticParams() {
  return [{ slug: 'hello' }, { slug: 'world' }]
}

export default ClientPage

build result

Route (app)
┌ ○ /
└ λ  /test/[slug] 

λ  (Server)  server-side renders at runtime

Workaround

Move 'use client' and client-side code into component:

/* /app/test/[slug]/page.jsx */
import Foo from './Foo'

const ServerPage = ({ params }: { params: { slug: string } }) => {
  return (
    <Foo slug={ params.slug } />
  )
}
export function generateStaticParams() {
  return [{ slug: 'hello' }, { slug: 'world' }]
}
export default ServerPage

/* /app/test/[slug]/Foo.jsx */
'use client'
import { useState } from 'react'

const Foo = ({ slug }) => {
  const [value, setValue] = useState(slug)

  return (
    <div>
      <p>foo is [{ value }]</p>
      <button type="button" onClick={ () => setValue("foo") }>Set foo</button>
    </div>
  )
}
export default Foo

build result

Route (app)
┌ ○ /
├ ● /test/[slug]
├   ├ /test/hello
└   └ /test/world

●  (SSG)     automatically generated as static HTML + JSON

Using Next.js v13.4.12

[durchanek]

@mingyeungs Unfortunately, this is not a full workaround because it requires slugs to be static.

[mingyeungs]

@durchanek indeed...hopefully it would be helpful for someone while we wait for a real fix.

[GabenGar]

How are you supposed to implement client-only dynamic paths on export then?
With pages router it was possible to do, with a caveat that all dynamic segments must be client-only. That also meant the built-in multilang support didn't work, so I had to re-implement a client-only multilang detection similar to what nextjs recommends for app router. Then I was just constructing route queries usable in a expressjs server which mapped to the exported files in an adhoc script, which was basically doing [lang]/blog/[id] -> :lang/blog/:id transforms with the route mapping to [lang]/blog/[id].html file.

[omozokelvin]

Can you please give a simple nginx config that will work for a basic

loans/:id route? Although I've resorted to using query params coupled with adding trailing slash in config which works just fine

[styfle]

Thanks for all the feedback!

• 📘 The docs for output: export have been updated to describe the Unsupported Features.
• 📕 Both next dev & next build will error when an unsupported feature is detected (try npm install next@canary)
• 📙 A related bug (but not strictly output export) where use client + generateStaticParams() also errors properly
• 📗 The remaining work is described in this new issue: [NEXT-1550] App Router with output: export does not support useParams() on client #54393

I'm going to close this issue since it has been a catch-all for several issues and most have been resolved.

Please add a 👍 reaction to #54393 if this describes the problem you're having (source).

If your problem is different, please create a new issue with the steps to reproduce using canary, thanks!

[github-actions]

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