Support dynamic routes (with dynamic params) in static export mode

[alexanderhorner]

Goals

Feature Request: Support Dynamic Routes with Dynamic Params in Static Export Mode

Current Behavior

Right now, when we use the { output: 'export' } option to statically pre-generate the app to run without a Node server, we hit a roadblock: dynamic routes like /post/[id] just can't be created. Yes, we can pre-generate specific pages such as /posts/1, /posts/2, /posts/3, and so on, but if we encounter values not known at build time, we are met with a 404 error. This is quite the hiccup for scenarios demanding static deployment coupled with dynamic data capabilities.

Desired Behavior

We're looking to get dynamic routes with variable parameters up and running in static export mode. The vision is to have routes like /post/[id] operate without a hitch, avoiding the dreaded 404 error when the ID parameter changes, and allowing individual posts to be fetched client-side. This change would significantly broaden the scope and usefulness of static exports.

Non-Goals

What This Feature Request Does Not Aim to Address

• Server-Side Rendering (SSR) Improvements: This request is focused on enhancing static export mode, not on bringing changes to SSR functionalities.

Background

Benefits

Flexibility: This feature would open doors for developers to exploit dynamic routes while still enjoying the perks of static export functionalities.
Honoring the Next.js Slogan: Let's make the Next.js slogan "The React Framework" ring true by covering a common SPA use case currently left out in the cold.

Potential Drawbacks

Complexity: While this looks promising, introducing dynamic parameters in static export mode might complicate route management a bit.

Alternatives Considered

Sticking with Static Paths: This option, albeit simpler, severely limits the dynamic functionalities, which are pretty much essential in modern web applications.
Switching to a Different Router: Though this sidesteps some Next.js framework limitations, it comes at the cost of losing many of its benefits and makes the transition between a static site and an SSR application a labor-intensive task.

Additional Context

Embracing dynamic parameters in static export mode would effectively bridge the existing gap between dynamic functionalities and static deployments, offering a flexible and robust solution for developers navigating strict deployment environments.

Proposal

Proposed Solution

Client-Side Rendering (CSR) Enhancements: Let's amp up CSR to facilitate dynamic data fetching based on the dynamic parameters present in the URL — all possible through useParams() or parameters relayed to the layout and page components. This isn't uncharted territory; it aligns well with the existing functionalities seen with useSearchParams() in client components.

Route Fallback Support: Introducing a fallback support system for dynamic routes in static export mode could be a game-changer. This means instead of getting a 404 error, users would land on a predefined fallback page, allowing for the client-side fetching of dynamic parameter data.

[VakarisZ]

Our project is private (don't care about SEO) and already has a back-end server, so there's no point in having server-side rendering and in turn, no need to use a node server. But we handle a lot of dynamic data so I'm highly interested in this

[alexanderhorner]

Exactly! If you've got a backend setup and aren't fussed about SEO, then the whole SSR shebang might not be for you. What you're highlighting is exactly why this feature is so key in many applications. Dynamic data shouldn't be a hassle, even in static deployments. Hope this gets the consideration it deserves. Really holding next back as “the react framework”.

[fromthemills]

See issue 54393

[eric-burel]

I think this is already planned because App Router is supposed to have the same capabilities as the Pages Router (or at least propose alternate patterns), just not the biggest priority
You can stick to the Page router for now if you really need this feature

[meds]

I wish I knew this before going in on app routers, guess I have a big re-refactor ahead of me

[williamflaherty]

A planned feature but in the app router docs it describes this as being possible now? https://nextjs.org/docs/app/building-your-application/deploying/static-exports

Definitely frustrating especially when you've used this in pages in the past and tried app router expecting similar functionality.

[GabenGar]

It states:

Unsupported Features

...

• Dynamic Routes without generateStaticParams()

So no, it's not supported yet and the docs say it's not supported either.

[meds]

THis one is very important to me as I use nextjs with Capacitor to generate iOS and Android apps. In those cases I export dynamic route pages that need to do remote requests (such as /user/[id]).

My current work arounds would be to either use query params (/user?id=blah) or go back to the pages routing.

edit: actually query params won't work as the builder still wants to turn it into a static html, so I can only go back to pages I guess...

[ww1724]

if dynamic page has child route, query params make sad

[I0T-4-L1F3]

Thank you for addressing this problem. I see another significant issue in that – memory overload. There should be the possibility to handle dynamic routes with client-side fetching. Without that option, on large platforms, users would have to download 'gigabytes', with the number growing every day, instead of megabytes from the App Store. Additionally, each new entry force users to update the app to prevent encountering 404 errors.

[cfv1984]

Hello everyone! Cross-posting myself from #54393 (comment) so I can get notified about any kind of development in this regard:

Just checking in to ask if this scenario is already supported by NextJS:

As a NextJS user
I have a NextJS application
I have a "use client" page.tsx in this application
I have this page.tsx file in a structure like so: /app/objects/[obj]/page.tsx
I want this page to render when the client types "https://my.url/objects/asdf"
I want 'asdf' in the previous example to be a string that I have zero beforehand knowledge about. Could exist, could not exist, could be a user ID, could be an eggplant emoji.
I want the obj param to exist and be set to "asdf" when I useParams().
I want "output:export" to not fail to build because of a missing generateStaticParams function I can't build.

Any news of any kind about this?

[OYaagoub]

hi everyone, guys i am looking for solution for two days , i started thinking to change framework , i have tried everything

`"use client";
import Navbar from "@/components/navbar/navbar";
import NotFound from "../../not-found";
import { useAuth } from "../../../../hooks/auth";
import { useState, useEffect } from "react";
import Objectx from "@/model/Objectx";
import AccordionNested from "@/components/accordionNested/AccordionNested";
import Attribute from "@/model/Attribute";
import CodeEditor from "@/components/editor/codeEditor";
import Image from "next/image";

function Lang({ params }: { params: any} ) {

const {sleep, handleSubmitAttribute,object, objectxsById, deleteAttribute, setCurrentLang, attributexs, setAttributes, attributes, user } = useAuth({ middleware: "Guest" });
const [mounted, setMounted] = useState(false);
const [open, setOpen] = useState("none");
const [errors, setErrors] = useState([]);
const [disableds, setDisableds] = useState(false);
const [dataFromChild, setDataFromChild] = useState("");
const [title, setTitle] = useState("");
//console.log(params.params[0]);
useEffect(() => {
// Run code when the component is mounted
if (!mounted) {
saveObject();
}
});
const openModal = () => {

setOpen(open === "none" ? "flex" : "none");

}
const saveObject = () => {
attributexs(params.params[0]);
objectxsById(params.params[0]);
setMounted(true);
}
if (isNaN(Number(params.params[0]))) return ;

// Callback function to receive data from the child
const handleDataFromChild = (data: any) => {

setDataFromChild(data);

};

const onSubmit = async (e: any) => {
e.preventDefault();
const newAttribute = JSON.stringify(
{
title: title,
content: dataFromChild!="" ? dataFromChild :"//Empty" ,
id_object: object?.id,
access_token: sessionStorage.getItem("keyPass"),

}

);
var message = await handleSubmitAttribute(newAttribute);
if (message[1] === "true") {
openModal();

setErrors(() => [message[0]]);

} else {

setErrors(() => [message[0]]);

}
await sleep(3000);
setErrors([]);
setTitle("");
setDataFromChild("");

}

const saveX=()=>{
setDisableds(!disableds);
}

return (
<>

  <div className="container flex flex-col justify-center w-full items-center mt-4 mx-auto" style={{ width: "95%" }}>
    <div id="accordion-nested-parent" data-accordion="collapse" className="mx-auto bg-white rounded-t-xl" style={{ width: "90%" }}>
      <h2 id="accordion-collapse-heading-1">
        <button type="button" className="flex  items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
          <span>Let&#34;s go with {object?.title}</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
            <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
          </svg>

        </button>
      </h2>
      <div id="accordion-collapse-body-1" className="flex" aria-labelledby="accordion-collapse-heading-1" >
        <div className="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900" style={{ width: "95%" }}>



          <a href="#" className="inline-flex justify-between items-center py-1 px-1 pe-4 mb-7 text-sm text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 ">
            <span className="text-xs bg-blue-600 rounded-full text-white px-4 py-1.5 me-3">New</span> <span className="text-sm font-medium">Jumbotron component was launched! See what&#34;s new</span>
            <svg className="w-2.5 h-2.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4" />
            </svg>
          </a>


          <p className="mb-4 text-gray-500 dark:text-gray-400 text-center items-center flex justify-center "><img className="" style={{ borderRadius: "50%", width: "120px", height: "120px" }} src={process.env.NEXT_PUBLIC_BACKEND_URL + "/" + object?.path} alt="" /></p>
          <p className="mb-2 text-gray-500 dark:text-gray-400 text-center">{object?.description}.</p>

          <div id="accordion-nested-collapse" data-accordion="collapse">

            {
              attributes?.map((item: Attribute) => (

                <AccordionNested key={item.id} onClick={deleteAttribute} data={item} />
              ))}






          </div>

        </div>
      </div>

    </div>



  </div>























  {user &&
    <>
      <button type="button" data-modal-target="static-modal" data-modal-toggle="static-modal" onClick={openModal}
        className="fixed  bottom-10 right-10 rounded-full bg-gray-800 p-7 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 mr-3">
        <span className="absolute -inset-1.5"></span>
        <span className="sr-only">new Attribute</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
          <path fillRule="evenodd" d="M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15Zm-6.75-10.5a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V10.5Z" clipRule="evenodd" />
        </svg>


      </button>




      <div id="static-modal" data-modal-backdrop="static" tabIndex={-1} aria-hidden="true" className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full " style={{ display: open }}>
        <div className="relative p-4 w-full max-w-6xl max-h-full">

          <form className="relative bg-white rounded-lg shadow dark:bg-gray-700" onSubmit={onSubmit}>

            <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                New Attribute
              </h3>
              <button type="button" onClick={openModal} className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="static-modal">
                <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
                <span className="sr-only">Close modal</span>
              </button>
            </div>


            <div className="p-4 md:p-5 space-y-4 ">

              <div className="mb-2">
                <label htmlFor="title" className="block mb-1 text-sm font-medium text-gray-900 dark:text-white">Title</label>
                <input type="text" id="title" value={title} autoComplete="off" onChange={(e:any) => setTitle(e.target.value)} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Type Title of Attribute" required />
              </div>


            </div>
            <div className="p-4 md:p-5 space-y-4 ">


              <CodeEditor sendDataToParent={handleDataFromChild} />


            </div>

            <div className="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
              <button disabled={!disableds} data-modal-hide="static-modal" type="submit" className={"text-white   focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 "+(disableds ?  "hover:bg-blue-800 bg-blue-700": "bg-blue-100")}>Submit</button>
              <button data-modal-hide="static-modal"  type="button" className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" onClick={openModal}>Close</button>
              <button onClick={saveX} data-modal-hide="static-modala" type="button" className="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"> {(disableds ?  "Saved": "Save")}</button>

            </div>
          </form>
        </div>
      </div>
    </>
  }
</>

);
}

export default Lang;
`

that is the error

`

Build error occurred
Error: Page "/Lang/[...params]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
at C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\build\index.js:1102:59
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\trace\trace.js:151:20)
at async Promise.all (index 4)
at async C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\build\index.js:981:17
at async Span.traceAsyncFn (C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\trace\trace.js:151:20)
at async C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\build\index.js:918:124
at async Span.traceAsyncFn (C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\trace\trace.js:151:20)
at async build (C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\build\index.js:374:9)
at async main (C:\Users\oyaag\Desktop\symfony\healpersAll\healpers-front-end\node_modules\next\dist\bin\next:155:5)
Collecting page data .`

[ccmvn]

Any update on this?

[OYaagoub]

no

[JoshuaSoileau]

🤚 I also am in the boat of needing this -- I need to do /page/[id] and be able to process that ID through client-side JS to make a request in my static build file.

I don't work at Vercel, but sadly, I don't see any way this is technically feasible.

The output of static builds are individual files. Without knowing the value of individual paths in the data beforehand, Next won't know what paths to create.

You could create a system in the framework that generates a /pages/[id].html file and then has client-side javascript to try to determine the ID -- but if export your website to static files, you'll need custom logic built into whatever bespoke infrastructure is serving those files (vercel/aws/digital ocean/etc) to know to route /pages/1235 to /pagesp/[id].html.

You'd have to plug into AWS Route 53 and Cloudfront and wherever else is modifying that request, and have them all account for this logic, and then do that on every hosting provider separately.

😞 I just don't see a way for this to happen.

The alternative is to compromise, and turn your dynamic links into URL parameters (which is what I'll have to do).
Instead of creating a dynamic route at /pages/[id], I'll have to make pages handle URL parameters like /pages?id=12345.

Then, when I export my content, the client side javascript will still be able to pick those values up and use them the way I need. It stinks, but I really don't see any other way.

[GabenGar]

The pages router worked exactly the same, that's the price you have to pay to keep client and server router in sync.

[chriskyndrid]

This is exactly what I need.

In my situation, I'll never use node as backend for anything outside of generating a particular subset(the next app) of a much larger codebase. Our backend is designed for high performance and is entirely written in Rust and entirely consumed via API, mostly via our primary Angular Client, but we have some e-commerce elements we choose to use React/Next for. I'd like to be able to build static pages of existing known content at some specific interval in our deployment process and have our application still seamlessly handle scenarios where those static pages do not exist, etc. There will potentially be tens thousands of those pre-rendered static pages, and hundreds of new additions every day. Deployment directly to CDN is part of our strategy for things like this.

Ultimately it seems impossible to use next(app router) to achieve these results, but perhaps our intended use case doesn't fit into vercel's business case.

[AndrewEastwood]

would it be supported at least?

[tadghh]

You need to use 'pages' to have dynamic routes while using static gen + app router. Sort of silly this error cant be overidden

[Malthehave]

This is a crucial feature. I don't understand why it hasn't been built yet. Especially since it seems pretty straight forward to build.

[ccmvn]

Wise words, I still have a bad feeling that it is somehow intentional

[Malthehave]

Yup I have the same feeling...

[AroldoGoulart]

have some update on this?

[tadghh]

have some update on this?

You need to use 'pages' to have dynamic routes while using static gen + app router.

[ramongarcia-merlyn]

It is quite embarrassing that such a widely adopted framework doesn't support for dynamic routes on client side.

For now we are working with parameters in the query string, which is very far from ideal.

[visionarylab]

There is Open NextJS. Maybe we can borrow from React Router V7 (RSC) or TanStack Router to implement sample template/boilerplate, if get popular it might get as close as Standard.

One thing I feel in React Industry is the standard either is shooting themselves in their leg (Next.js) else is always still "new but not fully feature"

[elmarsto]

This is clearly enshittification. I'm not sure if it's intentional or just selected-for (e.g. deprioritization of this bug in backlog grooming,) but either way, the result is the same.

→ Vercel is experiencing a conflict-of-interest. On one hand, it maintains an open source package that is now the de facto way of producing React apps;

→ On the other, it profits from a hosting business;

→ For some reason, there is a mysterious and undocumented limitation when using NextJS in the only way that does not require hosting.

Vercel, please don't be this way! I fought and advocated for your solutions, and now my own credibility is damaged, as we scramble to move from an S3-backed scenario to one that can do dynamic parameters (a feature which, by the way, has been supported in react-router since the Obama administration).

There's still time to fix this, though, and this very-downthread comment on a GH discussion is your warning; I'm old enough to have seen firsthand how reputational consequences can salt the earth for a startup.

I'm sorry this warning isn't larger, because I agree that the, ah, 'Business Experience' (BX?) of receiving an important warning in this way is not great. Yet I am powerless to do more.

You're not powerless, though!

[durchanek]

I am afraid you may be right. This issue was originally brought more than a year ago and it apparently has never become a priority.

[OYaagoub]

try old versions or use react native , i lose a lot of time because of this problem , it's make me change all my project to angular framework;

[chriskyndrid]

I switched to the Pages router. But this is dumb, and almost certainly an intentional business decision. It's unsurprising, however. Fortunately, most of our work in Next/React is decoupled in a manner that was very easy to move to Pages Router, but is less ergonomic than App Router. And, for the last 5 years, 100% of the backend work I do is in Rust and 95% on the frontend is in Angular, so we don't have a lot of dependencies on Next. I don't think I would consider Next again for a future project, howeve,r given this and other issues I've run into building out this particular tool. React is great though.