Posted at

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

More than 1 year has passed since last update.


はじめに

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!" が表示されれば、成功です。