@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-typesimporttype{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.tsxconstPage=async({ params, searchParams }: NextPageProps<{id: string},{lang: string}>)=>{const{ id }=awaitparams;const{ lang }=awaitsearchParams;return<div>Product ID: {id} | Language: {lang}</div>;};// /app/[locale]/layout.tsxconstLayout=async({ children, params }: NextLayoutProps<{locale: string}>)=>{const{ locale }=awaitparams;return(<htmllang={locale}><body>{children}</body></html>);};// /app/api/user/[id]/route.tsconstGET=async({ params }: NextRouteProps<{id: string}>)=>{const{ id }=awaitparams;returnnewResponse(`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. 🔥