Next.js 14 Tutorial - 2 - Hello World

Codevolution

6 Nov 202303:20

Summary

TLDRこのビデオでは、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のロゴの代わりにテキストを追加して保存します。

Outlines

00:00

🚀 はじめに: Next.js開発環境のセットアップ

ビデオでは、Next.jsアプリケーションの作成を開始するために、開発環境を設定します。Node.jsと任意のテキストエディター（Visual Studio Codeが推奨）をインストールする必要があります。Node.jsは、nodejs.orgからダウンロードしてインストールし、テキストエディターはcode.visualstudio.comからダウンロードします。次に、プロジェクト用のフォルダを作成し、VS Codeで開きます。`npx create-next-app`コマンドを実行して、Next.jsプロジェクトを作成し、プロジェクト名や他の設定についてプロンプトが表示されます。デフォルトの値を受け入れ、TypeScript、ESLint、Tailwind CSSを使用し、ソースコードを`src`フォルダに配置し、新しい`app`ルーターを使用します。プロジェクトフォルダに移動して、`npm run dev`コマンドを実行し、開発サーバーを立ち上げます。これで、ブラウザでアプリケーションが起動し、`pages`フォルダ内の`index.tsx`ファイルを編集して、Hello Worldのテキストを表示させることができます。

Mindmap

Keywords

💡Next.js

Next.jsは、Reactアプリケーションの開発を助けるフレームワークです。このビデオでは、Next.jsを使用してウェブアプリケーションを作成する方法が説明されています。Next.jsは、サーバーサイドレンダリングや静的サイト生成、APIルートなど、高度な機能を提供しています。

💡Node.js

Node.jsは、JavaScriptをサーバーサイドで実行するためのランタイム環境です。ビデオでは、Next.jsの開発環境を設定するためにNode.jsをインストールする必要があると説明しています。Node.jsは、非同期でイベント駆動型のJavaScriptの実行が可能にし、ウェブアプリケーションのバックエンド開発に広く使用されています。

💡VS Code

VS Codeは、Microsoftが開発した高度な機能を持つテキストエディターです。ビデオでは、VS Codeを使用してNext.jsプロジェクトのコードを編集することが推奨されています。VS Codeは、豊富な拡張機能とカスタマイズ性によって、プログラミングとコード編集の際に広く好まれています。

💡TypeScript

TypeScriptは、JavaScriptのスーパーセットで、静的な型付けをサポートしています。ビデオでは、Next.jsプロジェクトでTypeScriptを使用することが選択肢の一つとして提示されています。TypeScriptは、開発者がコードの型エラーを早期に検出できるようにし、大規模なアプリケーションの開発を助けます。

💡ESLint

ESLintは、JavaScriptコードのLintツールです。ビデオでは、Next.jsプロジェクトでESLintを使用することが選択肢の一つとして説明されています。ESLintは、コードの品質を保証し、プロジェクトのコード規約を強制するために使用されます。

💡Tailwind CSS

Tailwind CSSは、非常に柔軟性の高いユーティリティファーストCSSフレームワークです。ビデオでは、Tailwind CSSを使用してNext.jsアプリケーションのスタイルを適用することが選択肢の一つとして提示されています。Tailwind CSSは、CSSの記述を簡潔にし、再利用可能なコンポーネントを作成しやすくします。

💡App Router

App Routerは、Next.jsで提供される新しいルーティングシステムです。ビデオでは、Next.jsアプリケーションでApp Routerを使用することが選択肢の一つとして説明されています。App Routerは、より高度なルーティング機能を提供し、アプリケーションのナビゲーションをカスタマイズ可能にします。

💡Source Folder

ソースフォルダーは、アプリケーションのコードが格納されるディレクトリです。ビデオでは、すべてのコードをソースフォルダー内に配置することが選択肢の一つとして提示されています。これは、プロジェクトの構造を整理し、コードの管理を容易にするための一般的なプラクティスです。

💡npm run dev

npm run devは、Next.jsアプリケーションを開発モードで実行するためのコマンドです。ビデオでは、このコマンドを使用してローカル開発サーバーを立ち上げ、アプリケーションをテストすることが説明されています。開発モードでは、コードの変更を監視し、リアルタイムで更新反映させることができます。

💡localhost

localhostは、コンピュータ自体にアクセスするための特別なホスト名です。ビデオでは、アプリケーションがローカルホストのポート3000で実行されると説明されています。これは、開発者がローカルマシン上でアプリケーションをテストし、確認することができることを意味します。

💡Page Component

ページコンポーネントは、Next.jsでページを定義するために使用されるReactコンポーネントです。ビデオでは、ページコンポーネントを編集して、アプリケーションの表示内容を変更することが説明されています。ページコンポーネントは、Next.jsの動的なルーティングと組み合わせて、ウェブページを表示するために使用されます。

Highlights

Setting up a development environment for Next.js requires Node.js and a text editor like VS Code.

Download and install the latest stable release of Node.js from nodejs.org.

Ensure Node.js is updated to the latest version if already installed.

VS Code is recommended as the text editor for Next.js development.

Create a workspace folder, such as 'nextjs course', to hold the project files.

Use the command 'npx create-next-app' to create a new Next.js project.

During installation, you'll be prompted to name your project.

Accept the default values for additional prompts for a straightforward setup.

Choose to use TypeScript, ESLint, and Tailwind CSS during the project setup.

Select the option to place all code within a 'source' folder.

Opt for using the new 'app' router feature in Next.js.

Choose not to customize the default import alias for simplicity.

The creation command takes a few seconds to complete and sets up the project.

Navigate to the project folder using 'CD hello-world' in the terminal.

Run 'npm run dev' to start a development server on localhost port 3000.

Click the provided link to open the application in the browser.

Edit 'pages/index.tsx' to replace the Next.js logo with 'Hello World' text.

Saving changes to 'pages/index.tsx' updates the browser in real-time.

The video provides a step-by-step guide to generating a new Next.js application.

Explore the project's folder structure in the next video of the series.