VIDEO LESSON

Next.jsの環境構築：Pages Routerでインストールから起動までの解説動画

再生時間 7:01動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ネクストジェイエスの環境構築を、ページズルーターでインストールから起動まで進めます。
0:07公式のクリエイト・ネクスト・アプリを使うと、リアクトやタイプスクリプト、
0:11開発用コマンドなどをまとめて準備できます。
0:15この動画では、ノードジェイエスの確認からプロジェクトの作成、作成時の選択、
0:21最初のページの編集、開発サーバーの起動、そして本番ビルドの確認までを順番に追います。
0:26アプリルーターとはファイルの構成が異なるので、途中で両方を混ぜないことが大切です。
0:32まず、ノードジェイエスとエヌピーエムを確認します。
0:36二千二十六年九月の確認時点で、最新のネクストジェイエス公式インストールガイドは、
0:40ノードジェイエス二十・九以上を最低要件としています。
0:45ターミナルで、ノード・バージョン、エヌピーエム・バージョンの二つのコマンドを実行してください。
0:51先頭にドル記号を付ける必要はありません。
0:54コマンドが見つからなければ、ノードジェイエス公式サイトから導入し、ターミナルを開き直します。
1:01最低要件を満たすだけでなく、サポートされているエルティーエスを選ぶのが安全です。
1:06古い記事にある十四・六という要件は、現在の導入条件には使わないでください。
1:11プロジェクトを作成します。
1:13保存したい親ディレクトリで、画面のコマンドを実行してください。
1:17エヌピーエックス・クリエイト・ネクスト・アプリ・アット・レーテストで、マイネクストアプリという名前の新しいディレクトリが作成されます。
1:26その中へ移動し、エヌピーエム・ラン・デブで開発サーバーを起動します。
1:30ターミナルに表示されたユーアールエルへアクセスしてください。
1:34通常はローカルホスト三千番ですが、使用中のポートなどによって変わります。
1:39停止する場合は、ターミナルでコントロール・シーを押します。
1:42アット・レーテストは実行時点の最新版を取得する指定で、特定の古いバージョンを再現するものではありません。
1:49作成の途中で設定を選択する画面が出たら、推奨設定を一括で選ばず、カスタマイズを選びます。
1:56この記事に合わせる主要な選択は三つです。
1:59タイプスクリプトは有効にする。
2:01エスアールシー・ディレクトリは使用する。
2:04そして、アプリルーターは使用しない。
2:07これでページズルーターが選ばれます。
2:10スタイルの基礎を学ぶ段階では、テイルウィンド・シーエスエスを使用しなくてもかまいません。
2:16リンターはイーエスリントなどを選択し、生成された設定を使います。
2:21質問の順番や表記は、シーエルアイのバージョンで変わることがある点も覚えておきましょう。
2:28最初のページを編集します。
2:30ページズルーターを選んだことを確認して、エスアールシー・ページズ・インデックス・ティーエスエックスを、
2:35画面の内容に置き換えます。
2:40既存のサンプルが使っていたシーエスエスの読み込みは、この例には不要です。
2:46コードでは、フィーチャーという型を定義し、タイプスクリプトとルーティングの二つの項目を配列に入れて、
2:51キー付きで一覧表示しています。
2:56ヘッドでは、ページのタイトルと、メタ・ディスクリプションも設定しています。
3:02見出しや一覧の文言を変えながら、型と表示の対応を確認してみてください。
3:07ファイルを保存すると、開発サーバーが変更を反映します。
3:12ここで確認したいのは、編集したファイルの場所です。
3:16エスアールシー・アプリ・ページ・ティーエスエックスしか存在しない場合は、
3:20アプリルーターのプロジェクトです。
3:24その場合は、この例をそのまま追加せず、ルーターの選択から確認してください。
3:30また、タイプスクリプトは、たとえばラベルへ数値を入れるような間違いを編集時に検出できます。
3:37ただし、外部エーピーアイの実データを自動で検証するわけではなく、すべての実行時エラーを防ぐものでもありません。
3:46型は、コードの書き間違いを早く見つけるための仕組みとして理解しましょう。
3:52ジャバスクリプトやヤーンを使いたい場合です。
3:55ジャバスクリプトのプロジェクトは、ジェイエス・オプションを指定して作れます。
4:00ただし、これは別の新規プロジェクトを作るコマンドなので、先ほど作ったプロジェクトの中では実行しません。
4:07画面のファイルは、タイプスクリプトではティーエスエックス、ジャバスクリプトではジェイエスエックスなどを使い、
4:12型の定義は書けません。
4:16ヤーンをすでに利用している場合は、画面のようにヤーンからも公式シーエルアイを呼び出せます。
4:22大切なのは、ひとつのプロジェクトでエヌピーエムとヤーンのロックファイルを混在させず、
4:27チームでパッケージマネージャーを統一することです。
4:32本番向けのビルドを確認します。
4:34開発サーバーを停止してから、エヌピーエム・ラン・ビルド、続けてエヌピーエム・ラン・スタートを実行します。
4:40ここでは、ノードジェイエスのサーバーで公開する通常の構成を前提にしています。
4:45ビルドは、型エラーやページ生成の問題を確認する機会にもなります。
4:49スタートは、作成済みの本番ビルドを起動するコマンドです。
4:52そのため、先にビルドが成功している必要があります。
4:55開発サーバーで表示できたからといって、本番ビルドも成功するとは限らないので、
4:59両方を確認する習慣を付けましょう。
5:02公開方法の違いと、環境の記録です。
5:05アウトプット・エクスポートで静的エイチティーエムエルを出力する構成では、
5:10公開するのはアウトフォルダーの内容です。
5:14その場合は、ネクスト・スタートでの起動とは手順が異なります。
5:19作成した環境を再現できるように、使用バージョンも記録しましょう。
5:24エヌピーエム・エルエスで、ネクスト、リアクト、タイプスクリプトの導入バージョンを確認し、
5:30パッケージ・ジェイソンとロックファイルを保存します。
5:36ロックファイルがあることで、同じ依存関係を後から復元できます。
5:41記事の検証環境と異なる場合は、設定項目の違いを公式資料で確認してください。
5:47よくあるつまずきを整理します。
5:49ノードやエヌピーエムが見つからない場合は、インストールとターミナルのパスを確認してください。
5:55ページが変わらない場合は、開いているユーアールエルと、起動したプロジェクトのディレクトリが合っているかを確認します。
6:03インデックス・ティーエスエックスが見つからない場合は、アプリルーターや、
6:08エスアールシーを使用しない設定で生成していないかを確認しましょう。
6:13そして、既存プロジェクトを引き継いだ場合は、新規作成コマンドを再実行せず、
6:18付属の説明とロックファイルに従って、依存関係を復元するのが正しい進め方です。
6:23まとめです。
6:24環境構築の流れは、ノードジェイエスの要件確認、クリエイト・ネクスト・アプリでの作成、
6:31作成時の選択、ページの編集、開発サーバーでの確認、本番ビルドの確認、という順番でした。
6:37ポイントは二つです。
6:39作成時に選んだルーターを途中で混ぜないこと。
6:42そして、開発サーバーでの表示と本番ビルドの成功は別々に確認することです。
6:48環境ができたら、次はディレクトリ構成の記事で各ファイルの役割を理解し、コンポーネントの基礎へ進んでください。
6:56これで、ネクストジェイエスの環境構築の解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

create-next-appでTypeScriptとPages Routerの学習環境を作成。Node.jsの要件、作成時の選択、ページ編集、開発サーバーと本番ビルドの手順を解説します。

解説記事・サンプルコードを読む：Next.jsの環境構築：Pages Routerでインストールから起動まで →