Next.js 14 Tutorial - 3 - Project Structure

Codevolution

6 Nov 202305:46

Summary

TLDRこのビデオでは、Next.jsアプリケーションの基本的なファイルとフォルダー構造について詳しく説明しています。プロジェクトのルートレベルには4つのフォルダーと10つのファイルがありますが、まずは個々のファイルから始めましょう。package.jsonにはプロジェクトの依存関係とスクリプトが含まれています。また、Next.js、React、React DOMなどの必須パッケージがあります。CLIプロンプトでの選択に基づいて、TypeScript、Tailwind CSS、PostCSS、Autoprefixer、ESLintなどのパッケージが含まれます。次に、next.config.js、tsconfig.json、eslintrc.json、tailwind.config、postcss.configなどの設定ファイルがあります。また、package-lock.json、.gitignore、READMEファイル、next-env.d.tsなどのファイルも存在します。フォルダーについては、次のように説明されています。まず、nextフォルダーはdevまたはbuildスクリプトを実行したときに生成され、ここからNext.jsアプリケーションが提供されます。node_modulesフォルダーにはプロジェクトのすべての依存関係がインストールされています。publicフォルダーには静的アセットが含まれています。最も重要なのは、ソースフォルダー内のappフォルダーで、新しいNext.jsのappルーターが導入されています。このコースのほとんどの作業はここで行われます。レイアウト.tsxはルートレイアウトコンポーネントであり、localhost:3000に移動すると表示されます。ページ.tsxはブラウザで見られる固有のUIであり、前のビデオで変更したものです。最後に、制御の流れについて説明し、npm run devコマンドを実行すると、レイアウト.tsxに移行し、ルートレイアウトコンポーネントがレンダリングされます。子要素は常にappフォルダー内のページ.tsxで定義されたコンポーネントを参照し、ブラウザでレンダリングされます。次にReactで新しく導入された重要な概念について学び、それらがどのようにNext.jsのコードを書くための基礎を形成するかを理解しましょう。次のビデオでそれらについて詳しく説明します。チャンネルを購読し、次のビデオでお会いしましょう。

Takeaways

📂 プロジェクトのルートレベルには4つのフォルダーと10つのファイルがあります。
📄 `package.json` にはプロジェクトの依存関係とスクリプトが含まれています。
📚 必須パッケージとして `next`, `react`, `react-dom` が含まれています。
🔍 CLI プロンプトでの選択に基づいて、`typescript`, `tailwind`, `postcss`, `autoprefixer`, `eslint` などのパッケージが含まれる場合があります。
🔧 スクリプトには開発用 (`dev`)、本番用ビルド (`build`)、プロダクションサーバーの開始 (`start`)、ESLint 設定 (`lint`) があります。
🗃️ いくつかの設定ファイルとして `next.config.js`, `tsconfig.json`, `.eslintrc.json`, `tailwind.config`, `postcss.config` があります。
🔒 `package-lock.json` は依存関係の整合性を保証し、`.gitignore` はバージョン管理下にないで欲しいファイルを指定します。
📄 `README.md` にはアプリケーションの実行、構築、デプロイに関する手順が記載されています。
🚀 `next` フォルダーは `dev` または `build` スクリプトが実行されたときに生成され、アプリケーションが提供されます。
📦 `node_modules` フォルダーにはプロジェクトのすべての依存関係がインストールされます。
🌐 `public` フォルダーには画像やSVGなどの静的アセットが含まれます。
📁 `src` フォルダー内の `app` フォルダーは、新しい `app` ラウターが含まれており、コースのほとんどで作業を行います。
🌐 `layout.tsx` はルートレイアウトコンポーネントで、`localhost:3000` に移動するとレンダリングされます。
➡️ コントロールフローは `package.json` から `layout.tsx` へ、そして `page.tsx` へ、最後にブラウザに表示されます。
🔬 Reactで新しく導入された重要な概念を理解することが、Next.jsのコードを書くための基礎となります。

Q & A

プロジェクトのルートレベルに存在する4つのフォルダーと10つのファイルは何ですか？
-プロジェクトのルートレベルには、次のような4つのフォルダーと10つのファイルがあります。4つのフォルダーは、`next`、`node_modules`、`public`、`src`です。10つのファイルには、`package.json`、`next.config.js`、`tsconfig.json`、`.eslintrc.json`、`tailwind.config`、`postcss.config`、`package-lock.json`、`.gitignore`、`README.md`、`next-env.d.ts`が含まれます。
package.jsonファイルには何が含まれます？
-package.jsonファイルには、プロジェクトの依存関係とスクリプトが含まれています。これには、ReactとReact DOMなどの基本パッケージ、TypeScript、Tailwind CSS、Autoprefixer、ESLintなどが挙げられます。また、開発モードでアプリを開始する`dev`スクリプト、本番用のアプリを構築する`build`スクリプト、本番サーバーを開始する`start`スクリプト、Next.jsの組み込みESLint設定を設定する`lint`スクリプトがあります。
next.config.jsファイルの役割は何ですか？
-next.config.jsファイルは、Next.jsアプリケーションの設定をカスタマイズするために使用されます。これにより、アプリケーションの挙動を制御したり、デフォルトの挙動を変更したりすることができます。
tsconfig.jsonファイルとは何ですか？
-tsconfig.jsonファイルは、TypeScriptコンパイラの設定を定義するファイルです。これにより、コンパイラがTypeScriptコードをどのようにコンパイルするか、どのファイルやディレクトリを含めるべきか、そして、どのオプションを使用するかを指定することができます。
publicフォルダーには何が含まれます？
-publicフォルダーには、アプリケーションで使用されるすべての静的アセットが含まれます。これには、画像やSVGファイルなどが含まれます。このフォルダーは、Next.jsアプリケーションによって提供されるため、開発者が直接編集する必要はありません。
srcフォルダー内のappフォルダーとは何ですか？
-srcフォルダー内のappフォルダーは、Next.jsの新しく導入されたApp Routerの場所です。このフォルダー内では、アプリケーションのルーティング機能を定義し、アプリケーションの主要なロジックとUIを構築します。
page.tsxファイルの役割は何ですか？
-page.tsxファイルは、ブラウザで表示される一意のUIを定義するファイルです。これは、特定のURLにアクセスしたときに表示されるコンポーネントを含んでおり、Reactコンポーネントとして記述されます。
npm run devコマンドを実行するときに何が起こりますか？
-npm run devコマンドを実行すると、ターミナルで指定されたスクリプトが実行され、開発モードでアプリケーションが起動します。これにより、`layout.tsx`のルートレイアウトコンポーネントがレンダリングされ、`page.tsx`で定義されたコンポーネントがブラウザに表示されます。
Reactのルーティング機能はどのように機能しますか？
-Reactのルーティング機能は、アプリケーション内の異なるページや画面をナビゲートすることができるようにするための仕組みです。Next.jsでは、`app`フォルダー内の`page.tsx`ファイルを使ってルーティングを制御します。各ファイルは特定のURLに対応し、そのファイルで定義されたReactコンポーネントが、それに対応するページとして表示されます。
Reactで新しく導入された重要な概念とは何ですか？
-Reactで新しく導入された重要な概念には、コンポーネント、プロップ、ステート、そしてHooksが含まれます。これらの概念は、Reactアプリケーションを構築する際に不可欠であり、次のような役割を果たします：コンポーネントは再利用可能なUI部品を定義し、プロップはデータを子コンポーネントに渡す手段を提供し、ステートはコンポーネントの内部状態を管理し、Hooksは関数コンポーネントで状態やライフサイクルメソッドを使用できるようにします。
このビデオではどのようなアプリケーションを例として使用しましたか？
-このビデオでは、基本的なNext.jsアプリケーションの例として、「Hello World」プロジェクトを使用しました。これは、Next.jsアプリケーションを構築する際の基本的な構造と、そのしくみを理解するためのシンプルな例です。
アプリケーションを構築する際に使用される主要なテクノロジーは何ですか？
-アプリケーションを構築する際に使用される主要なテクノロジーには、Next.js（Reactフレームワーク）、React（UIライブラリ）、React DOM、TypeScript（静的型付け言語）、Tailwind CSS（CSSフレームワーク）、Autoprefixer（ブラウザごとの接頭辞を自動追加するツール）、ESLint（コード品質検査ツール）などがあります。

Outlines

00:00

📁 プロジェクトのファイル構造と基本設定

この段落では、以前の動画で作成したNexsアプリケーションのプロジェクトのファイルとフォルダ構造について詳しく説明されています。VS Codeで「Hello World」プロジェクトを開くと、ルートレベルに4つのフォルダと10個のファイルが表示されます。まず、個別のファイルを見ていきます。package.jsonには、プロジェクトの依存関係とスクリプトが含まれており、次はReactとReact DOMの基本的なパッケージです。CLIのプロンプトで選択に応じて、TypeScript、Tailwind、PostCSS、Auto Prefixer、ESLintパッケージが含まれています。スクリプトには、開発モードでアプリケーションを起動する「dev」、本番環境でのアプリケーションをビルドするための「build」、本番サーバーを起動する「start」、そしてNext.jsの組み込みESLint設定を設定するための「lint」があります。また、いくつかの設定ファイルが含まれており、次にTypeScript、ESLint、Tailwind CSS、PostCSSの設定ファイルが示されています。最後に、このシリーズではあまり関係ないいくつかのファイルを紹介しています。これには、依存関係のインストールを保証するpackage-lock.json、バージョン管理に含まれないgetignore、アプリケーションの実行、ビルド、デプロイに関する指示が記載されたREADMEファイル、そしてTypeScriptの宣言を含むnext-env.d.tsが含まれています。

05:01

🌀 アプリケーションのフォルダとルーティング

この段落では、アプリケーションのフォルダについて詳しく説明し、アプリケーションのルーティング機能を理解するためのReactで新たに導入されたいくつかの重要な概念を紹介しています。まず、アプリケーションが実行されるときの制御フローについて説明します。npm run devコマンドを実行すると、実行はルートレイアウトコンポーネントであるlayout.tsxに転送され、localhost:3000に移動すると、ページ.tsxにあるコンポーネントがレンダリングされます。次に、アプリケーションフォルダ内にあるappフォルダの役割について説明します。appフォルダには、新しいアプリルーターが導入され、このコースのほとんどの作業をここで行います。現在のところ、ファビコン、global.tsx、layout.tsx、page.tsxという4つの異なるファイルがあります。これらは、次回のセクションで詳しく説明されるUIの要素です。

Mindmap

Keywords

💡nexs

「nexs」は、ここではNext.jsというJavaScriptフレームワークの誤ったスペルと思われます。Next.jsは、Reactアプリケーションの開発を容易にするための機能を提供し、サーバーサイドレンダリングや静的サイト生成、APIルートなどをサポートしています。このビデオでは、Next.jsを使用して基本的なウェブアプリケーションの作成と実行について学びます。

💡Project's file and folder structure

「プロジェクトのファイルおよびフォルダ構造」とは、ソフトウェア開発において、プロジェクト内のファイルやフォルダがどのように整理されるかを指します。このビデオでは、Next.jsアプリケーションのルートレベルにあるフォルダとファイルの役割と、アプリケーションが実行される際の動作について解説しています。

💡package.json

「package.json」は、Node.jsのプロジェクトで使用されるファイルで、プロジェクトのメタデータ、依存関係、スクリプトなどの情報を記述します。ビデオでは、このファイルに記載されている依存関係とスクリプトが、アプリケーションの開発モードでの起動や本番環境へのビルドなど、様々なビルドプロセスを制御していると説明されています。

💡Next.js

「Next.js」は、Reactフレームワークで、ウェブアプリケーションの構築を簡素化するために設計されています。ビデオではNext.jsを使用して、基本的なウェブアプリケーションを作成し、そのファイル構造とルーティング機能について学ぶことができます。Next.jsは、サーバーサイドレンダリングやAPIルート、動的なインポートなど、高度な機能を提供しています。

💡typescript

「TypeScript」は、JavaScriptのスーパーセットで型システムを導入しています。これにより、開発者は静的にコードのエラーを検出できるようになり、大規模なアプリケーションの開発が容易になります。ビデオでは、TypeScriptがプロジェクトの依存関係の一部として挙げられており、Next.jsアプリケーションで使用される可能性があります。

💡tailwind

「Tailwind CSS」は、高度なCSSフレームワークで、再利用可能なスタイルクラスを提供して、ウェブページのスタイリングを迅速に行えるように設計されています。ビデオでは、Tailwind CSSがプロジェクトの依存関係として挙げられており、Next.jsアプリケーションのスタイル定義に使用される可能性があります。

💡eslint

「ESLint」は、JavaScriptコードのLintツールで、コードの品質を保証し、プロジェクトのコードスタイルを統一化します。ビデオでは、package.jsonファイル内のスクリプトを使用して、ESLintの設定を行うことが説明されています。これは、開発者がコードの質を保ちながら、より良いコードを書くためのサポートツールです。

💡next.config.js

「next.config.js」は、Next.jsアプリケーションの設定をカスタマイズするためのファイルです。このファイルを使って、アプリケーションの挙動を調整することができ、例えばAPIルートの設定や、カスタムサーバーの使用などがあります。ビデオでは、このファイルがNext.jsの設定に関するファイルとして触れられています。

💡tsconfig.json

「tsconfig.json」は、TypeScriptコンパイラの設定ファイルで、コンパイルオプションやプロジェクト構造に関する情報を記述します。これにより、TypeScriptの開発者が、プロジェクト固有の設定を行うことができます。ビデオでは、TypeScriptがプロジェクトに含まれている場合、このファイルが重要になると説明されています。

💡app folder

「appフォルダ」は、Next.jsの新しい機能で、アプリケーションのルーティングとページのレイアウトを定義する場所です。ビデオでは、このフォルダ内のファイルが、アプリケーションの主要なUIを形成し、ルーティング機能の実装に使用されると説明されています。

💡routing

「ルーティング」とは、ウェブアプリケーションで特定のURLに応答するようにページを制御するプロセスです。Next.jsでは、ルーティング機能が組み込まれており、簡単にページ間の遷移を実現できます。ビデオでは、appフォルダがルーティング機能を担当し、どのようにしてページがブラウザに表示されるかについて学ぶことができます。

Highlights

Explained the file and folder structure of a Next.js application.

Opened a 'Hello World' project in Visual Studio Code (VS Code).

Identified four folders and ten files at the root level of the project.

Described the 'package.json' file, which includes project dependencies and scripts.

Mentioned essential packages like Next, React, and React DOM.

Discussed optional packages based on CLI prompts, such as TypeScript, Tailwind CSS, and ESLint.

Outlined the scripts available for development, building, and starting the production server.

Highlighted configuration files like 'next.config.js', 'tsconfig.json', and 'eslintrc.json'.

Noted the 'package-lock.json' file ensures consistent dependency installation.

Explained the '.gitignore' file for version control and the 'README.md' file for instructions.

Described the 'next-env.d.ts' file containing TypeScript declarations for Next.js.

Discussed the '.next' folder, generated by running 'dev' or 'build' scripts, from which the application is served.

Identified the 'node_modules' folder where all project dependencies are installed.

Highlighted the 'public' folder for holding static assets like images and SVGs.

Emphasized the 'src' folder as the starting point for Next.js development, with a focus on the 'app' folder.

Listed the files within the 'src' folder, such as 'favicon.ico', 'global.css', 'layout.tsx', and 'page.tsx'.

Explained the flow of control from 'package.json' to 'layout.tsx' to 'page.tsx' in the browser.

Mentioned the routing feature and the importance of understanding new concepts in React for writing Next.js code.

Invited viewers to subscribe to the channel for more informative videos.