-
Notifications
You must be signed in to change notification settings - Fork 26.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[NEXT-1030] output: 'export'
with use client
in dynamic routes doesn't work
#48022
Comments
Can confirm. The .js files for the dynamic pages are actually in the |
output: 'export'
in latest canary (13.2.5-canary.32) does not export dynamic routes.output: 'export'
in 13.3.0 does not export dynamic routes from appDir.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
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
|
output: 'export'
in 13.3.0 does not export dynamic routes from appDir.output: 'export'
in 13.3.1-canary.* does not export dynamic routes from appDir.
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 :)). |
output: 'export'
in 13.3.1-canary.* does not export dynamic routes from appDir.output: 'export'
in 13.3.1-canary.* does not export dynamic routes from appDir.
Hi, I am also running into this issue here. |
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 👍 |
thanks for the update @styfle ! looking forward for this ! |
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 |
This still fails as of
|
Confirmed that it is failing on |
This comment was marked as outdated.
This comment was marked as outdated.
updated the reproduction repository to the latest |
output: 'export'
in 13.3.1-canary.* does not export dynamic routes from appDir.output: 'export'
in 13.* does not export dynamic routes from appDir.
This comment was marked as duplicate.
This comment was marked as duplicate.
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. |
hey @ytsruh, a few points to be made here:
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. |
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. |
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:
![]() |
This comment was marked as spam.
This comment was marked as spam.
I think this is a basic and very important feature for creating a static site and should be mentioned in the documentation. |
This comment was marked as duplicate.
This comment was marked as duplicate.
To sum up all the previous posts:
|
I mean, I'm trying to achieve what is described in the documentation Deploying > Static Exports > Deploying but none of the pages with |
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. |
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. |
) Adding docs about how Dynamic Segments aren't supported with Static Exports. - Related to #48022 Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
This comment was marked as spam.
This comment was marked as spam.
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 WorkaroundMove /* /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 |
@mingyeungs Unfortunately, this is not a full workaround because it requires slugs to be static. |
@durchanek indeed...hopefully it would be helpful for someone while we wait for a real fix. |
There are a few cases that are not handled by App Router when using `output: export` config. A few of them are expected, but some are yet to be implemented. Regardless of the intent of the future, this PR ensures the error messages match what was documented to be [unsupported](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features). - Documentation: #53592 - Issue: #48022
How are you supposed to implement client-only dynamic paths on export then? |
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 |
Thanks for all the feedback!
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 |
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. |
Verify 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
yarn install
yarn build
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
The text was updated successfully, but these errors were encountered: