Expected behavior for dynamic routes when hitting invalid urls

[jeremyProwseYS]

Summary

Setup / context

• Generate a basic next app using npx create-next-app
• Configure a dynamic page route with generateStaticParams:

// app/[slug]/page.tsx

import { notFound } from 'next/navigation'
const allowedPages = ['foo', 'bar']

async function fetchPage(slug: string) {
  const res = await new Promise((resolve) => {
    resolve(allowedPages.includes(slug))
  })
  return res
}

export async function generateStaticParams() {
  const paths: { slug: string }[] = []
  const predefinedRoutes = ['foo'] // only generate one of the allowedPages
  if (predefinedRoutes.length > 0) {
    predefinedRoutes.map((route) => paths.push({ slug: route }))
  }
  return paths
}

export default async function Page({ params }: { params: { slug: string } }) {
  const { slug } = await params
  const fetchedPage = await fetchPage(slug)
  if (!fetchedPage) {
    notFound()
  }
  return <div>Page Content for {slug}</div>
}

• When running a production build and viewing the .next/server/app dir, all static page resources are present as expected:
  • foo has been pre-compiled so that works like a charm.
  • When visiting bar, the other allowedPage this generates static files as expected given it should return a valid response from fetchPage.

However when entering a url that does not exist, i.e. /baz, files for this non-existent page are created in the .next/server/app directory.

• When running the same code without generateStaticParams and then testing, non of the static files related to the invalid routes are generated. But equally, all pages are now dynamically created on visit and not statically generated at build time (not ideal).

Thoughts / question
I would expect that any urls resulting in a 404 response would not generate related static files and instead just use the not-found / error-page files.

My primary concern is around the potential for a bad actor to flood a site with requests generating page files and inflating the disk usage on the server. I get that the alternative to having these files generated is that whatever API is providing the context for these pages existence is hit more frequently; say if people keep hitting /baz technically next knows this page doesn't exist due to the static files, but just trying to understand the exact intent here.

Please let me know if I am missing something or if this is expected behaviour.

Cheers.

Additional information

No response

Example

No response

[abhishekmardiya]

Add export const dynamicParams = false at the top of your page file—this will prevent static generation for unspecified routes.

References:
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#disable-rendering-for-unspecified-paths

[aaneloy]

Expected Behavior for Invalid Dynamic Route URLs

When a user hits an invalid URL for a dynamic route (e.g., /users/[id] with an ID that doesn't exist in your database), Next.js does not automatically return a 404. The framework passes the parameter to your page, and you are responsible for validation.

How to Handle Invalid Dynamic Parameters

Option 1: Use notFound() in Server Components (Recommended)

// app/users/[id]/page.tsx
import { notFound } from 'next/navigation';

async function getUser(id: string) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) return null;
  return res.json();
}

export default async function UserPage({ params }: { params: { id: string } }) {
  const user = await getUser(params.id);
  
  if (!user) {
    notFound(); // This triggers the not-found.tsx page
  }
  
  return <div>{user.name}</div>;
}

Option 2: Create a Custom not-found.tsx

// app/users/[id]/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>User Not Found</h2>
      <p>The requested user does not exist.</p>
    </div>
  );
}

Option 3: Validate with generateStaticParams + dynamicParams

If you want to restrict dynamic routes to only pre-known values:

// app/users/[id]/page.tsx
export async function generateStaticParams() {
  const users = await fetch('https://api.example.com/users').then(r => r.json());
  return users.map((user) => ({ id: user.id.toString() }));
}

// Set this to false to return 404 for any ID not in generateStaticParams
export const dynamicParams = false;

With dynamicParams = false, any URL with an ID not returned by generateStaticParams will automatically 404.

Summary

Scenario	Behavior
No validation	Page renders with invalid param
Using notFound()	Shows not-found.tsx with 404 status
dynamicParams = false	Auto-404 for unlisted params

Docs Reference

• Dynamic Routes
• notFound function
• generateStaticParams

[jeremyProwseYS]

I appreciate the input from you both @abhishekmardiya and @aaneloy, however I think you may have missed some context in my original question, here are the requirements and then the expected behavior in tldr format:

1. Predefined routes should generate on build (using generateStaticParams)
2. Non-predefined routes, that DO exist should be generated on first visit, ruling out use of dynamicParams = false (see /bar example in my original post)
3. Any routes that DO NOT exist should serve a 404 error (see /baz example in my original post)

I would then expect no static files would be generated for the 404 routes, however this does not seem to be the case.

[icyJoseph]

For this you need to define a cacheHandler - https://nextjs.org/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath - then you handle the ISR cache yourself. You can give it a go with an in-memory implementation first, and then save to disk - I haven't played all that much with this config but it should work (I managed to generate one though).