@itboom/next-types is a global TypeScript utility that provides strongly-typed, collision-safe prop types for Next.js App Router components.
It includes three globally available types — NextPageProps, NextLayoutProps, and
NextRouteProps — optimized for use in asynchronous environments where params and
searchParams are promises.
- ✅ Two usage modes: Import types or enable them globally via
tsconfig.json - 🧠 Async-first design: All props are promise-wrapped for
awaitsupport - 🧩 Collision-safe names: No clashes with
LayoutPropsfrom other libraries - 🔍 Clear intent: Names follow
NextPageProps,NextLayoutProps,NextRouteProps - ⚡ Lightweight: Types only, zero runtime code
bun add @itboom/next-typesnpm install @itboom/next-typesimport type {
NextPageProps,
NextLayoutProps,
NextRouteProps
} from '@itboom/next-types';In your tsconfig.json:
{
"compilerOptions": {
"types": ["@itboom/next-types"]
}
}If IntelliSense doesn’t work immediately, reload VS Code or restart the TS server.
// /app/product/[id]/page.tsx
const Page = async (
{ params, searchParams }: NextPageProps<{ id: string }, { lang: string }>
) => {
const { id } = await params;
const { lang } = await searchParams;
return <div>Product ID: {id} | Language: {lang}</div>;
};// /app/[locale]/layout.tsx
const Layout = async (
{ children, params }: NextLayoutProps<{ locale: string }>
) => {
const { locale } = await params;
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
};// /app/api/user/[id]/route.ts
const GET = async ({ params }: NextRouteProps<{ id: string }>) => {
const { id } = await params;
return new Response(`User ID: ${id}`);
};Props type for page.tsx components:
params: Promise<Params>– dynamic route segmentssearchParams: Promise<SearchParams>– parsed query string
Props type for layout.tsx components:
params: Promise<Params>children: React.ReactNode
Props type for route.ts handlers:
params: Promise<Params>
MIT License. See the LICENSE file for details.
Issues, ideas, and PRs are welcome — help improve typing hygiene for the Next.js ecosystem!
Created by Bohdan Kulinchenko
Founder of itboom.dev
GitHub: @ITBoomDev
Enjoy using @itboom/next-types — and type your props the clean and correct way. 🔥