Next.js 14 Tutorial - 2 - Hello World
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
🚀 はじめに: 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
💡Node.js
💡VS Code
💡TypeScript
💡ESLint
💡Tailwind CSS
💡App Router
💡Source Folder
💡npm run dev
💡localhost
💡Page Component
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.
Transcripts
in this video Let's create our very
first nexs
application to begin let's set up our
development environment for nextjs we'll
need two things installed nodejs and a
text editor of your choice for node
visit nos.org download and install the
latest stable release if you already
have it installed make sure to update
it as for the text editor I recommend
using vs code which you can download
from code dovisual studio.com
now that we have our environment ready
let's
proceed I have created a folder called
nexs course and opened vs code inside
the folder this folder will serve as our
workspace throughout the
series to create a new next sh project
we just need to run a single line of
code open the terminal control backt
being the shortcut and run the
command npx create next app at
latest on installation you'll see the
following prompts first the name of the
project let's call it hello hyphen world
the next six prompts we accept the
suggested default values we would like
to use typescript we would like to use
eslint we would like to use Tailwind CSS
we would like all our code to be placed
within a source
folder we would like to use the app
router which is the new router
available and finally we don't want to
customize the default import
Alias the command takes a few seconds to
run and once the command
completes you should have a new folder
called hello world which contains our
next shs
application to run the app application
navigate to the project folder using the
command CD hello world and then run the
command npm run
Dev this command will set up a
development server on Local Host Port
3000 you can control click or command
click the provided link to quickly open
the application in your
browser as you can see our hell World
application is now up and
running here you'll notice the
instruction get started by editing
Source slapp SL page.
TSX let's return to vs code expand the
source folder app folder and open page.
TSX here we can replace the next sh's
logo image with the text hello world and
save the file you should now see Hello
World displayed in the browser there you
go your first next year's application is
up and
running now that we understand how to
generate a new next year's application
using the create next app command let's
dive into the Project's folder structure
in the next
video
5.0 / 5 (0 votes)