Next.jsをパッケージからインストールしNext.jsプロジェクトへTypescript環境を構築して動かすまでの手順をメモしました。

Next.js

Nex.jsとは？

Next.jsについて詳しくはこちらの記事を参考にしてください。

環境

• Mac OS Big SUR 11.3.1
• yarn 1.22.10
• Node v14.15.3

ファイル操作で利用するUnixコマンドについて

基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。

Next.js環境の構築

Next.js環境を構築してい来ます。

プロジェクトの初期化

プロジェクトディレクトリを作成

~​/​next-sampleというプロジェクトディレクトリを作成します。

terminalCopy code$ mkdir ~/next-sample

プロジェクトディレクトリへ移動

作成した~​/​next-sampleディレクトリへ移動します。

terminalCopy code$ mkdir ~/next-sample

プロジェクトの初期化

yarnでプロジェクトの初期化を行います。
npmで実施する方は必要に応じて変更してください。

terminalCopy code$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.08s.

package.jsonが作成されました。

パッケージのインストール

next.jsのインストール

yarn installコマンドでnextをインストールします。

terminalCopy code$ yarn add next
yarn add v1.22.10
info No lockfile found.
// 中略
✨  Done in 49.83s.

Reactのインストール

Next.jsだけインストールしてアプリを起動しようとすると
Reactが必要だよと怒られます。

terminalCopy code$ yarn run next dev
// 中略
The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install react-dom'

yarn installコマンドでreactとreact-domをインストールします。

terminalCopy code$ yarn add react react-dom
yarn add v1.22.10
info No lockfile found.
// 中略
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ react-dom@17.0.2
└─ react@17.0.2
info All dependencies
├─ react-dom@17.0.2
├─ react@17.0.2
└─ scheduler@0.20.2
✨  Done in 7.77s.

TypeScriptのインストール

Next.jsをTypeScriptでかきたいためtypescriptをインストールします。
yarn installコマンドでtypesscriptと型の定義ファイルである@types​/​reactと@types​/​nodeを合わせてインストールします。 アプリケーションコードではなく環境ようのコードのため-Dオプションを付与します。

terminalCopy code$ yarn add -D typescript @types/react @types/node
yarn add v1.22.10
info No lockfile found.
// 中略
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
├─ @types/node@15.12.2
├─ @types/react@17.0.11
└─ typescript@4.3.2
info All dependencies
├─ @types/node@15.12.2
├─ @types/prop-types@15.7.3
├─ @types/react@17.0.11
├─ @types/scheduler@0.16.1
├─ csstype@3.0.8
└─ typescript@4.3.2
✨  Done in 5.50s.

インストールしたパッケージの確認

package.jsonを開きインストールされたパッケージを確認します。

perlCopy code  "dependencies": {
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^15.12.2",
    "@types/react": "^17.0.11",
    "typescript": "^4.3.2"
  }

サンプルページの作成

pagesディレクトリの作成

Next.jsではデフォルトでpagesディレクトリの階層にそって
ルーティングが作成されます。
mkdirコマンドでpagesディレクトリを作成します。

terminalCopy code$ mkdir ~/next-sample/pages

トップページの作成

トップページとなるテンプレートファイルとして
pagesディレクトリの直下にindex.tsxを作成します。

terminalCopy code$ vim ~/next-sample/pages/index.tsx

下記内容を追記します。

index.tsx

index.tsxCopy codeimport React, { ReactElement } from 'react'

const Home = (): ReactElement => {
  return <div>Hello, world!</div>;
};
export default Home;

これでNext.jsアプリの起動する環境の準備ができました。

Next.jsアプリの起動

アプリケーションを起動させていきます。

npm scriptsへ起動コマンドの追加

package.jsonのscriptsへ起動コマンドを追記します。
Next.jsの開発時の起動コマンドは next devです。

terminalCopy code$ vim ~/next-sample/package.json

下記を追記します。

追記する内容

jsonCopy code  "scripts": {
    "dev": "next dev"
  },

package.json全体

package.jsonCopy code{
  "name": "next-sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^15.12.2",
    "@types/react": "^17.0.11",
    "typescript": "^4.3.2"
  }
}

起動コマンドの実行

追記したdevコマンド実行します。

terminalCopy code$ yarn dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
// 中略　
wait  - compiling...
event - compiled successfully

コンソールへsuccessfullyと表示されたらアプリケーション起動は成功です。

ブラウザからアクセス

アプリケーションが起動したのでブラウザからアクセスしてみます。 http:localhost:3000へアクセスしてみてください。

Hello, world!と表示が確認できます。