Next.jsでTypeScriptの環境を構築する｜Playground発！アプリ開発会社の技術ブログ

「Next.js使ってみたい」
「今時、TypeScriptも導入するでしょ」
「Next.js × TypeScriptの環境でオススメの設定を知りたい」

今回はこうした思いを持つ方向けに記事を書いていきます。

Reactのフレームワークとして人気の高いNext.jsで構築した環境に、TypeScriptを導入してみました。

この記事で解説すること

create-next-appでNext.jsの環境を構築する方法
Next.jsで作った環境でTypeScriptを使えるようにする方法
Next.js × TypeScriptのオススメ設定

本記事で作成する環境のバージョンは、最終的に以下のようになります。

package.json

{
  "dependencies": {
    "next": "9.5.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.44",
    "typescript": "^3.9.7"
  }
}

目次 [hide]

1 Next.jsプロジェクトを作ろう
2 Next.jsで作った環境でTypeScriptを使えるようにする
3 Next.js × TypeScriptのおすすめ設定
- 3.1 _app.tsxを設定しよう
- 3.2 _document.tsxを記述する

Next.jsプロジェクトを作ろう

早速、npxコマンドでcreate-next-appを実行しましょう。フォルダ名は任意のものを。

$ npx create-next-app next-ts

以下のような構成でプロジェクトが作成されたと思います。

next-ts
  ┣ node_modules/
  ┣ public/
  ┃ ┣ favicon.ico
  ┃ ┗ versal.svg
  ┣ pages/
  ┃ ┣ api/
  ┃ ┃ ┗ helle.js
  ┃ ┣ _app.js
  ┃ ┗ index.js
  ┣ styles/
  ┃ ┣ global.css
  ┃ ┗ Home.module.css
  ┣ package.json
  ┣ package-lock.json
  ┗ README.md

Next.jsのバージョン9.1でsrcディレクトリがサポートされました。

Reactコンポーネントを格納するpagesディレクトリを、srcディレクトリに移動させましょう。

$ mkdir src && mv pages src

ここで確認のために、ローカルサーバーを立ち上げてみましょう。

$ npm run dev

localhost:3000にアクセスすると、以下のような画面が見えるはずです。

次にTypeScriptを使えるようにしましょう。

Next.jsで作った環境でTypeScriptを使えるようにする

まずはnpmでTypeScript化に必要なパッケージをインストールします。

$ npm install --save-dev typescript @types/react @types/react-dom

そして以下のファイルの拡張子を.tsまたは.tsxに変更しましょう。

拡張子を変更しよう

src/pages/index.js　→　src/pages/index.tsx
src/pages/_app.js　→　src/pages/_app.tsx
src/pages/api/hello.ts　→　src/pages/api/hello.ts

試しに型をつけてみましょう！

src/pages/index.tsx

import React, {FC} from 'react'  // {FC} をimport対象に追加
import Head from 'next/head'
import styles from '../../styles/Home.module.css' // srcディレクトリに移したことで階層が1つ深くなったので、「../」を追加

// Homeコンポーネントの型としてFC（FunctionalComponent）を定義
const Home: FC = () => {
  return (
    // 省略
  )
} export default Home;

src/pages/_app.tsx

import React from 'react'
import {AppProps} from 'next/app'; // 型定義を追加

// Functional Componentに書き直して型定義を追加
// コンポーネント名をMyAppからAppに変更
const App = ({Component, pageProps}: AppProps) => {
    return 
}

export default App

ここで確認のために、ローカルサーバーを立ち上げます。

$ npm run dev

そうすると、tsconfig.jsonが作成されます。tsconfig.jsonの中身は以下の通りです。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

tsconfig.jsonのオプションはこちらの記事が参考になると思います。

Next.js × TypeScriptのおすすめ設定

pagesディレクトリには以下2つの特殊なファイルを作成することができます。

pagesディレクトリの設定ファイル

_app.tsx：Routeコンポーネントをラップする特殊なコンポーネントファイル
_document.tsx：最終的に出力するHTMLファイルの設定ができるファイル

_app.tsxを設定しよう

先ほど、_app.tsxファイルの役割を「Routeコンポーネントをラップする」とお伝えしましたね。

では、実際のところ何を記述するのが良いでしょうか？

答えは、全てのページで共通して実行させたい処理や共通のレイアウトです。

例えば、認証情報の監視が例としてあげられると思います。

Firebase Authenticationで認証状態を監視するコードを書いてみます。

src/pages/_app.tsx

import React, {useEffect} from 'react'
import {AppProps} from 'next/app';
import {firebase} from 'firebase/index';

const App = ({Component, pageProps}: AppProps) => {

    useEffect(() => {
        return firebase.auth.onAuthStateChanged((user) => {
        })
    }, [])

    return (
        
    )
}

export default App

これで、全てのページで認証状態の監視が呼び出されるようになりました。

_document.tsxを記述する

以下のコードでは、htmlタグのlang属性に「日本語ロケール」を示す”ja”を指定しています。

src/pages/_document.tsx

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class CustomDocument extends Document {
    render() {
        return (
                
                    
                    
                    
                
                
                    
                
            
        );
    }
}
export default CustomDocument;