こんにちは。
毎日暑いですね。
フロントエンドのフレームワークをあまり触ったことがなかったので、今回はNext.jsを試してみようかと思います。
Next.jsってなんだ
Next.jsはReactベースのWebアプリケーションフレームワークです。
ReactはJavaScriptライブラリなので基本的にはクライアントサイドでレンダリングされますが、Next.jsではNode.jsを使用してサーバー側でWebサイトをレンダリングすることができます。
ちなみに同じくJavaScriptライブラリとして有名なVue.jsベースのWebアプリケーションフレームワークとしてNuxt.jsがあります。ややこしい。
プロジェクトを作る
Next.jsは13.4より前までの「Pages Router」という構成と、13.4以降で利用できる「App Router」という構成があります。
13.4以降でも「Pages Router」を選択することはできますが、新規に作成する場合には「App Router」を利用するのがおすすめです。
単なるバージョンアップではなく、かなり根本的な構成の違いがあるので公式のドキュメントもがっつり分かれている模様。
というわけでプロジェクトを作ります。
Node.jsとnpmのバージョンはこんな感じです。最新ではないかも。
node --version > v18.16.0 npm --version > 9.5.1
で、こんな感じでコマンドを叩きます。
npxはnpmに含まれるコマンドで、ローカルに存在しないコマンドでもリモートの npm パッケージから任意のコマンドを実行することができます。
npx create-next-app@latest
基本的には初期選択されているままで問題はないかなと。つまりEnterをペコペコ押していく感じ。
Need to install the following packages: create-next-app@13.4.13 Ok to proceed? (y) y √ What is your project named? ... sample-app √ Would you like to use TypeScript? ... No / Yes √ Would you like to use ESLint? ... No / Yes √ Would you like to use Tailwind CSS? ... No / Yes √ Would you like to use `src/` directory? ... No / Yes √ Would you like to use App Router? (recommended) ... No / Yes √ Would you like to customize the default import alias? ... No / Yes
ちょっと時間がかかりますが、必要なものを全部インストールしてくれます。
VSCodeで開くとこんな感じ。
とりあえず何もせずにWebアプリケーションを起動してみます。
npm run dev > sample-app@0.1.0 dev > next dev - ready started server on 0.0.0.0:3000, url: http://localhost:3000
ちなみにページのソースを表示するとHTMLに最初から出力されているので、ちゃんとサーバサイドのレンダリングになってますね。
（1行で表示されて見づらいけどそういうものらしい…デバッグ用にprettyモードとか作ってくれないかしら）
ちょっと中身を見てみる
なんだか勝手にいろいろファイルができたので、何のファイルがどういう役割かだけざっくり確認してみます。
- .eslintrc.json
ESLintの設定ファイル
- next-env.d.ts
Next.js用のTypeScript宣言ファイル（Next.js自体が提供するコンポーネントの型情報）
- next.config.js
Next.jsの設定ファイル
Node.jsでインストールするパッケージを記述したファイル
- postcss.config.js
- tailwind.config.ts
Tailwind CSSの設定ファイル
- tsconfig.json
TypeScript用の設定ファイル
src/appの下はルーティングに関係するので今回は保留。
とりあえず動いた
というわけでコマンド一つでアプリケーションを作れるのは素敵ですね。
