Next.js: Tutorial TypeScript
目次

TypeScript

How to set up Next.js with TypeScript

  1. プロジェクトルートディレクトリ直下に tsconfig.json を作る

  2. TypeScript をインストールする

    $ npm install --save-dev typescript @types/react @types/node
    
  3. 開発サーバーを再起動する

    $ npm run dev
    
  4. サーバー再起動後、 Next.js は次のことをしてくれるでしょう。

    • tsconfig.json ファイルの中身を入れてくれる。このファイルは、自分でカスタマイズしても良し。

    • next-env.d.ts ファイルを作ってくれる。このファイルは、触ってはいけません。

      • このファイルは、Next.js types が確実に TypeScript compiler にピックアップされるようにします。

これで、 Next.js アプリで TypeScript が使えるようになります!

Next.js Specific Types

Next.js 固有のタイプが使えるよ。

Static Generation and Server-side Rendering

  • TypeScript

    import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
    
    export const getStaticProps: GetStaticProps = async context => {
      // ...
    }
    
    export const getStaticPaths: GetStaticPaths = async () => {
      // ...
    }
    
    export const getServerSideProps: GetServerSideProps = async context => {
      // ...
    }
    
  • JavaScript

    export async function getStaticProps(context) {
      // ...
    }
    
    export async function getStaticPaths() {
      // ...
    }
    
    export async function getServerSideProps(context) {
      // ...
    }
    

API Routes

/* TypeScript */
import { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse) => {
  // ...
}

/* JavaScript */
export default (req, res) => {
  // ...
}

Custom App

  • TypeScript

    // built-in type
    import { AppProps } from 'next/app'
    
    function App({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} />
    }
    
    export default App
    
  • JavaScript

    export default function App({ Component, pageProps }) {
      return <Component {...pageProps} />
    }