Next.js Dynamic Route with TypeScript

Published Wed Feb 08 2023

Next.js Version

• Version 13.3.1

AppProps for Next.js Pages

AppProps for Next.js Pages is initially empty object, according blow code snippet from Next.js.

export declare type AppInitialProps<PageProps = any> = {
  pageProps: PageProps;
};

To avoid TypeScript errors, need to add your own properties in the Page Props, below is the code examples for dynamic route pages.

Code example for dynamic routes.

type PageProps = {
	params: {
		tag: string;
	}
}
export default function tagListPage = ({params}: PageProps) {
	return <h1>My Page</h1>;
}