【Next.js】30分でできる! Next.js 開発の始め方（インストール、開発環境構築）【入門】

2022-12-28

はじめに

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介します。必要ソフトウェアのインストールし、 Hello World を表示し、作成したソースコードを GitHub で管理できる状態にするまでを目標にします。

環境構築

まず、開発環境の構築から行います。OS によって詳細手順が異なりますが、ここでは Windows の場合を紹介します。

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

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

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

ダウンロード | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

https://nodejs.org/ja/download/

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

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

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

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

Git for Windows

We bring the awesome Git VCS to Windows

https://gitforwindows.org/

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

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

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

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

https://code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

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 に翻訳をかけてくれるので、これをご活用ください。

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play

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

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

> npm run dev

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

default-nextjs

なお、このコマンドでブラウザに画面を表示している間はコードを編集すると自動で画面に反映されますが、ターミナルが動きません。このモードは、[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

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

hello-world

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

（プロジェクトフォルダ）
　├─ /.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のリンク先のページを作成できます。

GitHub でソースコードを管理する

基本的な部分ができたところで、GitHub を使ってソースコードをネットに上げましょう。 GitHub とは先述した Git をネット上で使えるクラウドサービスで、 リモートリポジトリ という箱を作ってその中にソースコードの変更履歴をためていくことができます。 GitHub が一番有名ですが、後述する Cloudflare Pages では類似のシステムである GitLab も対応しているので、そちらを使っても構いません。

まずは以下のサイトで GitHub のアカウントを作成しましょう。

GitHub: Let’s build from here

GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

https://github.com

次に、先ほど説明したリモートリポジトリを作成します。このとき public を選択すれば、ネット上にソースコードが公開される公開リポジトリを、 private を選択すれば招待したユーザしか見れない非公開リポジトリを作成できます。

注意点として、GitHub の公開リポジトリにファイルを上げた時点で、そのファイルは全世界から見れる状態になっています。パスワードや個人情報などを載せないように気をつけましょう。有料クラウドサービスのアカウントが流出して何千ドルも被害が出るようなケースもあります。非公開リポジトリであってもそういった情報はむやみに載せないのが鉄則です。

リモートリポジトリが作成できたところで、VSCode で Git を動かして GitHub にソースコードを上げていきます。初回は以下のとおりコマンドが多いですが、二回目以降は以下のとおりコマンドが少なく済みます。

# 初回
> git init
> git config user.name （GitHubのアカウントのユーザ名）
> git config user.email （GitHubのアカウントのメールアドレス）
> git remote add origin https://～（リモートリポジトリのURL）.git
> git branch -M master
> git add *
> git commit -m "first commit"
> git push origin master

# 次回以降コミット（保存）したい場合
> git add *
> git commit -m "（保存時のコメント）"
> git push origin master

これで GitHub にソースコードが上がりました。 GitHub にアクセスするとコードの内容を確認できます。

GitHub では多人数でソースコードを編集することもできます。その場合はいろいろ作法がありますが、今回は個人開発なので割愛します。

作成したサイトをインターネットに公開するまでの流れ

私の場合は、GitHub に登録したソースコードを Cloudflare Pages に自動で転送するように設定しています。また、お名前ドットコム でカスタムドメインを取得し、取得したドメインでサイトが表示されるように設定しています。（お名前ドットコムは初年度無料ですが更新料が高めなので、更新日が近づいたら他のサービスを検討します）

Cloudflare Pages

Build your next application with Cloudflare Pages

https://pages.cloudflare.com/

ドメイン取得は最安値0円～｜ドメイン取るならお名前.com

お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績2800万件を超えました。人気の.com .net .jpドメインを含め580種類以上のドメインを取り扱っています。ドメイン取得は早い者勝ちです。第三者に取得される前に、まずは検索を！新規登録と同時申込みでWhois情報公開代行が無料。

https://www.onamae.com/

ここまでの設定でサイトをインターネット上に公開することができます。（このあたりの流れについては別記事を作成する予定です）

まとめ

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介しました。必要ソフトウェアのインストールし、 Hello World を表示しました。また、作成したソースコードを GitHub で管理できる状態にしました。

実際には、ここまでに作った土台の上に様々なコーディングをかけることで、ブログなどのサイトになるようにしていきます。そのやり方については「Next.js」の検索ワードなどで調べながら少しずつ手を入れていただければと思います。

本ブログでも、様々なブログパーツの開発について紹介していきます。