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（コード品質検査ツール）などがあります。