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

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

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というプロジェクトディレクトリを作成します。

terminal
$ mkdir ~/next-sample

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

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

terminal
$ mkdir ~/next-sample

プロジェクトの初期化

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

terminal
$ 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をインストールします。

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

Reactのインストール

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

terminal
$ 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コマンドでreactreact-domをインストールします。

terminal
$ 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オプションを付与します。

terminal
$ 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を開きインストールされたパッケージを確認します。

  "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ディレクトリを作成します。

terminal
$ mkdir ~/next-sample/pages

トップページの作成

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

terminal
$ vim ~/next-sample/pages/index.tsx

下記内容を追記します。

index.tsx

index.tsx
import React, { ReactElement } from 'react' const Home = (): ReactElement => { return <div>Hello, world!</div>; }; export default Home;

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

Next.jsアプリの起動

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

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

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

terminal
$ vim ~/next-sample/package.json

下記を追記します。

追記する内容

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

package.json全体

package.json
{ "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コマンド実行します。

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

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

ブラウザからアクセス

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

next.js ブラウザからアクセス

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

終わりに

最後までご覧いただきありがとうございます。
この記事ではNext.jsをパッケージからインストールしNext.jsプロジェクトへTypescript環境を構築して動かすまでの手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。