Next.js provides an integrated TypeScript experience out of the box, similar to an IDE.
\nTo get started, create an empty tsconfig.json file in the root of your project:
touch tsconfig.json\nNext.js will automatically configure this file with default values. Providing your own tsconfig.json with custom compiler options is also supported.
\n\nNext.js uses Babel to handle TypeScript, which has some caveats, and some compiler options are handled differently.
\n
Then, run next (normally npm run dev) and Next.js will guide you through the installation of the required packages to finish the setup:
npm run dev\n\n# You'll see instructions like these:\n#\n# Please install typescript, @types/react, and @types/node by running:\n#\n# yarn add --dev typescript @types/react @types/node\n#\n# ...\nYou're now ready to start converting files from .js to .tsx and leveraging the benefits of TypeScript!.
\n\nA file named
\nnext-env.d.tswill be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it, however, you can edit it (but you don't need to).
\n\nNext.js
\nstrictmode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in yourtsconfig.json.
By default, Next.js reports TypeScript errors during development for pages you are actively working on. TypeScript errors for inactive pages do not block the development process.
\nIf you want to silence the error reports, refer to the documentation for Ignoring TypeScript errors.
\nFor getStaticProps, getStaticPaths, and getServerSideProps, you can use the GetStaticProps, GetStaticPaths, and GetServerSideProps types respectively:
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'\n\nexport const getStaticProps: GetStaticProps = async context => {\n // ...\n}\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n // ...\n}\n\nexport const getServerSideProps: GetServerSideProps = async context => {\n // ...\n}\n\n\nIf you're using
\ngetInitialProps, you can follow the directions on this page.
The following is an example of how to use the built-in types for API routes:
\nimport { NextApiRequest, NextApiResponse } from 'next'\n\nexport default (req: NextApiRequest, res: NextApiResponse) => {\n res.status(200).json({ name: 'John Doe' })\n}\nYou can also type the response data:
\nimport { NextApiRequest, NextApiResponse } from 'next'\n\ntype Data = {\n name: string\n}\n\nexport default (req: NextApiRequest, res: NextApiResponse<Data>) => {\n res.status(200).json({ name: 'John Doe' })\n}\nAppIf you have a custom App , you can use the built-in type AppProps and change file name to ./pages/_app.tsx like so:
import { AppProps } from 'next/app'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return <Component {...pageProps} />\n}\n\nexport default MyApp\nNext.js automatically supports the tsconfig.json \"paths\" and \"baseUrl\" options.
You can learn more about this feature on the Module Path aliases documentation.
"},"__N_SSG":true}