Next.js 14 Tutorial - 2 - Hello World

Summary

このビデオでは、Next.jsアプリケーションの開発環境をセットアップし、初めてのアプリケーションを作成する方法を学びます。必要なものはNode.jsと任意のテキストエディターです。Node.jsはnodejs.orgからダウンロードし、最新の安定版をインストールしてください。テキストエディターはVS Codeをおすすめします。開発環境が整ったら、新しいNext.jsプロジェクトを作成するために、ターミナルで`npx create-next-app`コマンドを実行します。プロンプトが表示されたら、プロジェクト名を「hello-world」とし、デフォルトの設定をそのまま使用して、TypeScript、ESLint、Tailwind CSSを利用し、ソースコードを`source`フォルダに配置し、新しい`app`ルーターを使用します。プロジェクトが作成されると、`npm run dev`コマンドで開発サーバーが立ち上がり、ブラウザでアプリケーションを確認できます。`pages`フォルダ内の`index.tsx`ファイルを編集して、Next.jsのロゴを「Hello World」のテキストに置き換え、保存すると、ブラウザに表示されます。これで、初めてのNext.jsアプリケーションが実行されています。次のビデオでは、プロジェクトのフォルダ構造について詳しく説明します。

Takeaways

• 🛠️ まず、開発環境をセットアップする必要があります。Node.jsと任意のテキストエディターをインストールします。
• 🌐 Node.jsは、nodejs.orgから最新の安定版をダウンロード・インストールしてください。
• 💡 テキストエディターとして、VS Codeが推奨されています。ダウンロードは、code.visualstudio.comから行えます。
• 📁 プロジェクト用のフォルダ「nexs course」を作成し、VS Codeでそのフォルダを開きます。
• 🚀 新しいNext.jsプロジェクトを作成するために、ターミナルで `npx create-next-app` コマンドを実行します。
• 📝 プロンプトが表示されたら、プロジェクト名「hello-world」を入力し、他の設定はデフォルト値をそのまま使用します。
• 🔍 TypeScript、ESLint、Tailwind CSSを使用したい旨、またソースコードは`source`フォルダ内に配置したい旨を示します。
• 🗺️ アプリルーターを使用したい旨を指定し、デフォルトのインポートエイリアスをカスタマイズしない旨も含めます。
• 🏃‍♂️ コマンドが実行されると、`hello-world`という名前の新しいフォルダが作成され、そこにNext.jsアプリケーションが含まれます。
• 🔧 プロジェクトフォルダに移動後、`npm run dev` コマンドを実行して開発サーバーを立ち上げます。
• 🌐 開発サーバーがLocal Host Port 3000で立ち上がり、ブラウザでアプリケーションを確認できます。
• ✍️ `pages`フォルダ内の`index.tsx`ファイルを編集して、Next.jsのロゴを「Hello World」テキストに置き換え、保存します。
• 🔄 保存後、ブラウザに「Hello World」が表示されます。これで、最初のNext.jsアプリケーションが実行されています。
• 📂 次のビデオでは、プロジェクトのフォルダー構造について詳しく説明します。

Q & A

Next.jsの開発環境を設定するために必要なものは何ですか？

Next.jsの開発環境を設定するためには、Node.jsと任意のテキストエディターが必要です。Node.jsはnodejs.orgからダウンロードしてインストールし、テキストエディターとしてはVS Codeが推奨されています。

Next.jsプロジェクトを作成するために必要なコマンドは何ですか？

Next.jsプロジェクトを作成するために必要なコマンドは、`npx create-next-app`です。

プロジェクトの名前を設定するプロンプトで提案されたデフォルト値は何ですか？

プロジェクトの名前を設定するプロンプトで提案されたデフォルト値は、`hello-world`です。

TypeScriptを使用したい場合、どのように選択しますか？

TypeScriptを使用したい場合は、プロンプトで提供される選択肢からTypeScriptを使用するオプションを選択します。

EslintとTailwind CSSをプロジェクトに追加するにはどうすればよいですか？

EslintとTailwind CSSをプロジェクトに追加するには、それぞれのオプションに対してプロンプトで提供される選択肢を肯定的に選択します。

ソースコードを一つのフォルダー内にまとめたい場合、どのように設定しますか？

ソースコードを一つのフォルダー内にまとめたい場合は、プロンプトで提供される選択肢で、全てのコードを`source`フォルダー内に配置するオプションを選択します。

Next.jsの新しいルータであるApp Routerを使用するにはどうすればよいですか？

App Routerを使用するには、プロンプトで提供される選択肢で、新しいApp Routerを使用するオプションを選択します。

プロジェクトのフォルダー構造を確認するにはどうすればよいですか？

プロジェクトのフォルダー構造を確認するには、VS Codeでプロジェクトフォルダー内の`pages`フォルダーや`src`フォルダーなどを開いて、それぞれのファイルとディレクトリの内容を確認します。

開発サーバーを立ち上げるにはどのようなコマンドを使用しますか？

開発サーバーを立ち上げるには、`npm run dev`というコマンドを使用します。これにより、localhostのポート3000で開発サーバーが立ち上がります。

ブラウザでアプリケーションを確認するにはどうすればよいですか？

ブラウザでアプリケーションを確認するには、`npm run dev`コマンド実行後に提供されるリンクをクリックするか、ブラウザで`http://localhost:3000`にアクセスします。

ページのコンテンツを変更するにはどうすればよいですか？

ページのコンテンツを変更するには、VS Codeで`pages`フォルダー内の関連するファイル（例: `index.tsx`）を開き、その中身を編集して保存します。変更は自動的にブラウザに反映されます。

プロジェクトの初期状態で表示されるテキストを変更するにはどうすればよいですか？

プロジェクトの初期状態で表示されるテキストを変更するには、`pages`フォルダー内の`index.tsx`ファイルを開き、その中にあるNext.jsのロゴの代わりにテキストを追加して保存します。