CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jstsx
cyberAnn
cyberAnn

Reputation: 471

What does NextPage in Next.js do?

I just started using TypeScript with Next. What does this do? import { NextPage } from 'next'; export const Page: NextPage = () => {} I looked at the docs but it does really give a good explanation in what it does.

I am guessing by the name that it routes pages. Can someone please explain what this does?

Thank you.

Upvotes: 11

Views: 10882

Answers (2)

Uheed Asif
Uheed Asif

Reputation: 21

import { NextPage } from 'next'; : This line imports the NextPage type from the next package. The NextPage type is a generic type provided by Next.js for defining the type of a Next.js page component.

When you create a page in Next.js, you typically define it as a React component. The NextPage type is a type alias for a React component that is a Next.js page. It includes properties specific to Next.js pages, such as getStaticProps, getServerSideProps, and others used for data fetching during page rendering.

So, in summary, the code you provided is creating a Next.js page component using TypeScript. It is defining a constant named Page with the type NextPage and providing the logic for your page within the arrow function. This is a common pattern when working with Next.js and TypeScript to ensure type safety and provide better development tooling support.

Upvotes: 2

Brendan Bond
Brendan Bond

Reputation: 1890

My advice is to start here, but in brief:

import { NextPage } from 'next';

export const Page: NextPage = () => {}

NextPage is a type exported by NextJS. When we write Page: NextPage we're saying that our Page component is of type NextPage.

Upvotes: 10

Related Questions