nextjs-route-types
v1.1.1
Published
Automatic type generation for Next.js app router routes
Downloads
74
Readme
nextjs-route-types
Automatic type generation for Next.js app router routes, ~~copied from~~ highly inspired by SvelteKit.
Installation
Install the package from NPM:
npm install nextjs-route-types # npm yarn add nextjs-route-types # yarn pnpm add nextjs-route-types # pnpm bun add nextjs-route-types # bun
Use the Next.js plugin in your Next.js config file
const { withNextJSRouteTypes } = require("nextjs-route-types"); /** @type {import("next").NextConfig} */ const nextConfig = { // your Next.js configurations }; module.exports = withNextJSRouteTypes(nextConfig);
Configure
tsconfig.json
: Add"rootDirs": [".", ".next-types"]
to yourcompilerOptions
. This step is necessary, we need this for TypeScript to know where to look when we import from./$types
.If you use Git you might want to add
.next-types
to.gitignore
.
Usage
In any files inside the app
directory (or src/app
if you use it), you can import certain types from "./$types"
:
// app/[dynamic]/[nested]/page.tsx
import type { PageProps } from "./$types";
export default function Page({ params }: PageProps) {
console.log(params.dynamic); // string
return <div>Hello world</div>;
}
// app/[dynamic]/[...another]/route.ts
import type { RouteHandler } from "./$types";
export const GET: RouteHandler = (request, { params }) => {
console.log(params.another); // string[];
return new Response();
};
./$types
exports the following types: SearchParams
, Params
, DefaultProps
, ErrorProps
, LayoutProps
, LoadingProps
, NotFoundProps
, PageProps
, TemplateProps
, RouteHandlerContext
and RouteHandler
.
Note Editor IntelliSense might not work and you likely have to type that import statement manually. This is a known issue that I don't know how to fix – PRs welcome.
Credits
SvelteKit for the idea of using rootDirs
for this.
nextjs-routes
on which the Next.js plugin part of this code is based.