GENERATORS

Next.js Page Generator

Scaffold a Next.js route from a path — App Router or Pages Router, TS or JS, with server / client components, data fetching (fetch + revalidate, generateStaticParams, getServerSideProps / getStaticProps), metadata, and the loading / error / not-found / layout files.

What this tool does

You type a route path and it works out the folder structure and writes the page file — plus the sibling special files — in the router and language your project uses.

App Router

Server Component by default, or a 'use client' component. Data can come from an async component with fetch(url, { next: { revalidate } }), and dynamic routes can add generateStaticParams for static generation. SEO is a static metadata export or an async generateMetadata. Params are typed either as a plain object (Next 14) or an awaited Promise (Next 15).

Special files

Toggle loading.tsx, error.tsx (a client error boundary), not-found.tsx and layout.tsx — each appears as its own tab.

Pages Router

getServerSideProps for SSR, getStaticProps + getStaticPaths for SSG, or a plain client component, with NextPage typing and a next/head block.

Privacy

Everything runs in your browser. Nothing is uploaded.

FAQ

Frequently asked questions

App Router or Pages Router?

App Router for any new Next.js app (13.4+). Pages Router only if your project has not migrated — both are still supported.

Why are params a Promise?

From Next 15, params and searchParams in App Router pages are async and must be awaited. Pick "Next 15" and the generated code awaits them; "Next 14" keeps the plain-object form.

How do I make a route statically generated?

For a dynamic App Router route, enable generateStaticParams — it returns the list of param values to pre-render at build time.

Does it handle catch-all routes?

Yes. [slug] is a single segment, [...slug] is catch-all (string[]), [[...slug]] is optional catch-all (string[] | undefined). Route groups like (marketing) are recognised and excluded from the URL.

Is anything sent to a server?

No. The scaffold is generated entirely in your browser.