Next.js環境構築

Next.jsでHello Worldを表示する

必要ソフトウェアのインストールし、 Hello World を表示し、作成したソースコードを GitHub で管理できる状態にするまでを解説します。

環境構築

Windowsの場合について、開発環境の構築を行います。

1. Node.js をインストールする

Next.js は Node.js というシステムで動作します。これは簡単に言うと、普段 Google Chrome や Edge や Safari などの Web ブラウザ上で動いている JavaScript のプログラムをサーバー上で動かせるシステムです。npm という、各種 Web 開発関連の機能を動作させるシステムも付属していて、こちらも多用することになります。

以下のサイトからダウンロードし、インストールします。 （npm は Node.js をインストールする際に自動でインストールされます）

インストーラーを起動するといろいろとオプションを選択できますが、すべてデフォルトの設定で問題ありません。

2. Git をインストールする

Git もインストールします。 これは作成したコードの変更履歴を管理したりバックアップをとっておいてくれるシステムですが、 後述する GitHub と組み合わせると、インターネット上にソースコードを置いて他の人と共有したり、 複数人でソースコードを編集したりすることができます。

Windows の場合は以下のサイトからダウンロードし、インストールします。

3. Visual Studio Code をインストールする

続けて、Next.js のコーディングをするためのツールを導入します。 いくつか手段はありますが、Visual Studio Code（以下、VSCode） が特におすすめです。 非常に高速に動作し、様々なプログラミング言語の開発がこれ一つでできる上、Next.js 開発との相性も抜群です。

以下のサイトからダウンロードし、インストールします。

4. VSCode の拡張機能をインストールし、初期設定する

次に、インストールした VSCode に拡張機能をインストールします。 標準機能だけでも使えなくはありませんが、拡張機能を使うと開発効率が一気にアップします。

今回は以下の 4 つをインストールします。 VSCode のショートカットキー[ctrl + shift + X]で拡張機能を開き、以下の機能をそれぞれ検索してインストールボタンを押すとインストールできます。

  • Japanese Language Pack for Visual Studio Code
  • ES7 React/Redux/GraphQL/React-N
  • ESLint
  • Prettier – Code formatter

上から順番に、VSCode の日本語化、コードのハイライト表示、コードのエラーチェック、コードの自動整形の機能になります。

なお、 Prettier – Code formatter のみインストールした後で手動の設定が必要になります。 VSCode の[ctrl + ,]で設定画面を開き、 Format On Save にチェックを入れ、 Default Formatter で Prettier -Code formatter を選択します。 これで設定完了です。

Next.js のプロジェクトを新規作成する

VSCode の[ctrl + @]で ターミナル を開き、以下のコマンドを入力します。 最初のコマンドを実行するとプロジェクト名を聞かれるので、任意のプロジェクト名を入力しましょう。 以降は作成したプロジェクトのフォルダが作業フォルダになります。

> npx create-next-app --typescript
> cd (作成したプロジェクト名)

--typescriptオプションについてですが、これをつけると TypeScript の形式でコードを作成してくれます。 （短縮形の--tsで書いても OK）

TypeScript とは、通常の JavaScript に加えてデータ型やクラスを書けるようにした言語です。 データ型が書けるようになったことで、変なデータが変数に入ることを防ぐことができます。

以降は TypeScript の形式（.tsx）でコードを書きますが、もし JavaScript の形式（.js）で書きたい場合は、 以下の TypeScript の Prayground で JavaScript に翻訳をかけてくれるので、これをご活用ください。

Next.js の初期画面を表示してみる

ここまでできたら、Next.js の初期画面を表示してみましょう。 ターミナルで以下のコマンドを実行します。

> npm run dev

コマンドを実行すると、URL が表示されます（通常は localhost:3000）。 その URL をクリックして Web ブラウザで以下のような画面が表示されれば成功です。 （この時点ではまだネットには公開されません）

なお、このコマンドでブラウザに画面を表示している間はコードを編集すると自動で画面に反映されますが、 ターミナルが動きません。このモードは、[ctrl + c]で停止できます。

Next.js の余計なファイルを削除して最小限の構成にする

初期画面が無事表示されましたので、次は最初に作成されたファイル群から以下の不要なものを削除していきます。

  • pages/api
  • pages/api/hello.ts
  • styles/Home.module.css
  • public/vercel.svg

次に、プロジェクトフォルダ直下にsrcフォルダを作成し、その中にpagesフォルダとstylesフォルダを移動させます。

また、src/pages/index.tsxを以下のように最小限の内容にしておきます。 return();で HTML タグを含むコードを返すと、それがそのまま HTML の文書としてページに表示されます。

src/pages/index.tsx

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <h2>hello world!!</h2>
    </>
  );
};

export default Home;

ここまでで一旦、先ほども使ったコマンドで Web サイトの内容を確認してみます。

> npm run dev

今度は以下のような画面が表示されるかと思います。

なおここまでで、以下のようなフォルダ構造になったかと思います。

（プロジェクトフォルダ）
　├─ /.next
　├─ /node_modules
　├─ /public
　│　　└─ favicon.ico
　├─ /src
　│　　├─ /pages
　│　　│　　├─ _app.tsx
　│　　│　　└─ index.tsx
　│　　└─ /styles
　│　　　 　└─ globals.css
　├─ .eslintrc.json
　├─ .gitignore
　├─ next-env.d.ts
　├─ next.config.js
　├─ package-lock.json
　├─ package.json
　├─ README.md
　└─ tsconfig.json

ここで簡単に主要ファイルやフォルダの説明をしておきます。

publicフォルダには、サイトで使う画像ファイルなどを格納できます。

サイト全体に関する共通設定は_app.tsx内に記述できます。 ただし、<link>タグなどの一部の設定は_document.tsxというファイルを作り、そこに記述する必要があります。

pagesフォルダに tsx ファイルを追加すると、それがそのまま Web ページになります。 例えばpage.tsxを作成するとhttp://localhost:3000/pageのリンク先のページを作成できます。

関連記事:

Next.jsの詳しい説明（React.js入門＆実践） Next.jsとは？ ECサイト構築例 React.js Redux Next
,