reactjs next.js nextjs-dynamic-routing nextjs-15

How to use output: 'export' without generateStaticParams() in Next.JS with 'use client';

I am migrating my client-side React website to next.js and want to keep everything as SSG but with next.js file-based routing capabilities.

I have this component on my React website, where I use a dynamic path using /blog/:slug in React Router, and it works as expected if I go to /blog/hello-world.

Now I have converted this same thing but in Next.js, so my file structure looks like this:

.
├── app
│   ├── blog
│   │   └── [slug]
│   │       └── page.tsx

And the component is simple for now:

"use client";

// app/blog/[slug]/page.tsx

import { useParams } from "next/navigation";

export default function Page() {
  const { slug } = useParams();

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      Hello {slug}
    </div>
  );
}

This gives me an error in dev mode when I go to URL: http://localhost:3000/blog/hello-world

Error: Page "/blog/[slug]/page" is missing exported function "generateStaticParams()", which is required with "output: export" config.

Now I don't want to define generateStaticParams because the data is coming from a database, and it will be dynamically loaded. Blog is just for example, but I am loading much different data from the database based on the slug.

My next.config.ts looks like this:

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  distDir: "./dist",
};

export default nextConfig;

If I define the generateStaticParams function and return an empty array just to experiment, it gives me an error about generateStaticParams can't be used with use client.

I am doing this because I want to keep this website purely client-side for now and deployment on AWS S3.

I saw similar questions, but the solution they are providing is to downgrade to Next 13, which I don't want to do. I am using the next version: next@15.3.2.

References:

Solution

Ok, so I conclude 'This is not possible yet'.

So I wanted to move a simple SPA from React -> next.js since the React docs recommend this framework, and next.js recommends app router. However, `next.js's app router can't even do this yet (more here): https://github.com/vercel/next.js/discussions/55393

I read discussions on the official next.js repository, and people are still asking for this feature, but it's not available yet. They are saying in pages router we can do it, but next.js recommends app router.

As a workaround, people are using /blogs/?slug=[<value>] instead of /blogs/[slug]

For my use case, I just wanted to use file-based routing that next.js provides instead of react-router, since React docs suggest this framework, and just get SPA output to deploy on CDN, but it doesn't seem to be possible after the research I did, Given that I am still open to new answers or work around if you find, Thanks.

References: