Next.js + TypeScript でWEBアプリを作る #1 〜Hello worldまで〜

はじめに

Next.jsを使ってアプリケーションを作ってみようと思い、その際の手順をまとめてみました。

使用技術

• Next.js: Reactを使ったフレームワーク
• TypeScript: JavaScriptで型が扱える言語
• Redux: 状態管理をするライブラリ

作成手順

プロジェクトの作成

まず、パッケージ管理にyarnを使用するため、インストール

npm install -g yarn

次にプロジェクトを初期化します。

npm init 

色々きかれるので、都度答えます。
これで、package.jsonが作られて、空のプロジェクトができあがります。

Next.jsのインストール

まずは、Next.jsとReactをインストールしていきます。

yarn add next react react-dom

npm scriptでnextを利用できるようにpackage.jsonに下記を加えます。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

Next.jsは、pagesというディレクト以下のファイルを自動的に読み込み、そのファイル名でルーティングを行います。
ただし、index.jsという名前の場合は/へのアクセス時に読み込まれます。
試しに、pagesというディレクトリを生成し、そこにindex.jsxという名前で下記を記述してみます。

index.jsx

export default () => <div>Welcome to next.js!</div>

先ほどのnpm scriptを実行してみます。

yarn run dev

これで、http://localhost:3000 にアクセスすると、"Welcome to next.js!" というメッセージが表示されると思います。

TypeScriptを使うための準備

Next.jsでTypeScriptを使うには next-typescript というNext.jsのプラグインを使用します。

yarn add @zeit/next-typescript typescript

次に、next.config.js という名前でプロジェクト直下にファイルを作成し、下記を記述します。

next.config.js

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

さらに、tsconfig.json という名前で、同じくプロジェクト直下にファイルを生成し、下記を記述します。

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2016"
    ]
  }
}

これで、TypeScriptでの記述が可能になりました。

TypeScriptでの開発

先ほどの pages/index.jsx を pages/index.tsx にリネームして、再度 yarn run dev を実行すると、先ほどと同じように "Welcome to next.js!" が表示されれば、成功です。