* TypeScript documentation for _app.tsx * Use relative URL * Use relative URL * Update docs/basic-features/typescript.md Co-Authored-By: Luis Alvarez D. <luis@zeit.co> * Update docs/basic-features/typescript.md Co-Authored-By: Luis Alvarez D. <luis@zeit.co> Co-authored-by: Luis Alvarez D. <luis@zeit.co>
4 KiB
description |
---|
Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here. |
TypeScript
Examples
Next.js provides an integrated TypeScript experience out of the box, similar to an IDE.
To get started, create an empty tsconfig.json
file in the root of your project:
touch tsconfig.json
Next.js will automatically configure this file with default values. Providing your own tsconfig.json
with custom compiler options is also supported.
Next.js uses Babel to handle TypeScript, which has some caveats, and some compiler options are handled differently.
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
# You'll see instructions like these:
#
# Please install typescript, @types/react, and @types/node by running:
#
# yarn add --dev typescript @types/react @types/node
#
# ...
You're now ready to start converting files from .js
to .tsx
and leveraging the benefits of TypeScript!.
A file named
next-env.d.ts
will 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).
Next.js
strict
mode is disabled 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.
If you want to silence the error reports, refer to the documentation for Ignoring TypeScript errors.
Pages
For function components the NextPage
type is exported, here's how to use it:
import { NextPage } from 'next'
interface Props {
userAgent?: string;
}
const Page: NextPage<Props> = ({ userAgent }) => (
<main>Your user agent: {userAgent}</main>
)
Page.getInitialProps = async ({ req }) => {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
export default Page
And for React.Component
you can use NextPageContext
:
import React from 'react'
import { NextPageContext } from 'next'
interface Props {
userAgent?: string;
}
export default class Page extends React.Component<Props> {
static async getInitialProps({ req }: NextPageContext) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
const { userAgent } = this.props
return <main>Your user agent: {userAgent}</main>
}
}
API Routes
The following is an example of how to use the built-in types for API routes:
import { NextApiRequest, NextApiResponse } from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ name: 'John Doe' })
}
You can also type the response data:
import { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
res.status(200).json({ name: 'John Doe' })
}
Custom App
If you have a custom App
, you can use the built-in type AppProps
, like so:
import { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp