はじめに

このページは、これまでPythonで飯を食ってきた筆者が、春から新しく関わることになったプロジェクトで初めてNext.jsを触ることになったため、最低限使えるようになるまでの学習の軌跡を記したものである。

したがって想定する読者は

プログラミング初心者ではなく（Next.jsの作法や文法を知らないだけ）
筆者と同じく初めてNext.jsに触れるNext.js初心者

となっているため、プログラミングそのものが初めての人にはお勧めしないことに注意してほしい。

Next.jsとは

「ReactベースのフルスタックWebアプリケーションフレームワーク」[参考1]らしい。MITライセンスで開発されており、商用・私用を問わず無償で利用可能なようだ。

また、こちらには

Next.jsはサーバーサイドレンダリング(SSR)やファイルベースルーティングなど多くの機能をゼロコンフィグで提供してくれます。また、開発会社Vercelが同名のプラットフォームVercelを展開しており、デプロイ/ビルド/配信までを一気通貫に提供しています。

とあり、これだけだとまだ実感は湧かないが、なんだかすごそうな気がしてきた。

サーバサイドレンダリング（SSR）とは、クライアントサイドレンダリング（CSR）と対になるWebページの描画方法で、その名の通り、HTMLの生成をサーバ側で行うため、CSRと比較するとブラウザ側が低コストで済むのが大きなメリット。すなわちページを表示するデバイスのスペックをあまり考慮せずに、安定した配信が可能となる。またページ遷移ごとにサーバ側でレンダリングを行うため、表示速度には若干の遅延があるが、すべてのページに固有のURLが割り当てられるためSEOに強い（らしい）。

もちろんCSRにもそれなりのメリットは存在するため、作りたいものに合った描画方法を選択することが重要なのは言うまでもない。

Next.jsのインストールから初期画面表示まで

以下、Windows + VSCode で作業していることを前提とする。MacやLinuxの場合は適宜読み替えてほしい。

Node.jsのインストール

どうやらNext.jsをインストールするために、まずはNode.jsをインストールする必要があるようだ。[参考2]

まずはNode.jsのダウンロードサイトを開いて、LTS版のインストーラをダウンロードする。その後ダウンロードしたインストーラを実行し、画面の指示に従ってインストールを完了したら、以下のコマンドで動作確認をしよう。インストールしたNode.jsのバージョンが表示されれば大丈夫だ。

node -v
# v20.13.1

npm -v
# 10.5.2

プロジェクトの作成

作業ディレクトリまで移動して、以下のコマンドを実行すると、プロジェクトが自動作成される。

npx create-next-app sample_app

コマンドを実行すると、プロジェクトの設定についていろいろと質問されるが、今回は以下のように回答した。基本的にはEnterを押していくだけで良いはずだ。

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

プロジェクトの作成に成功すると、./sample_app/ に必要なファイル群がひと通り生成されている。あとは生成されたREADME.mdにもある通り、プロジェクトルートで

npm run dev

すれば開発用サーバが立ち上がるので、http://localhost:3000にブラウザでアクセスして、初期画面が表示されることを確認しよう。

記事が長くなりそうなのと、リアルタイムで学習している真っ最中なので、この続きは次の投稿で書くこととする。

参考文献