Next.js 14 Tutorial - 3 - Project Structure
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
📁 プロジェクトのファイル構造と基本設定
この段落では、以前の動画で作成した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が含まれています。
🌀 アプリケーションのフォルダとルーティング
この段落では、アプリケーションのフォルダについて詳しく説明し、アプリケーションのルーティング機能を理解するためのReactで新たに導入されたいくつかの重要な概念を紹介しています。まず、アプリケーションが実行されるときの制御フローについて説明します。npm run devコマンドを実行すると、実行はルートレイアウトコンポーネントであるlayout.tsxに転送され、localhost:3000に移動すると、ページ.tsxにあるコンポーネントがレンダリングされます。次に、アプリケーションフォルダ内にあるappフォルダの役割について説明します。appフォルダには、新しいアプリルーターが導入され、このコースのほとんどの作業をここで行います。現在のところ、ファビコン、global.tsx、layout.tsx、page.tsxという4つの異なるファイルがあります。これらは、次回のセクションで詳しく説明されるUIの要素です。
Mindmap
Keywords
💡nexs
💡Project's file and folder structure
💡package.json
💡Next.js
💡typescript
💡tailwind
💡eslint
💡next.config.js
💡tsconfig.json
💡app folder
💡routing
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.
Transcripts
in the previous video we learned how to
create and run a basic nexs
application now let's dive deeper into
the Project's file and folder structure
to understand how everything works when
we run the
application I've opened the hellow world
project in vs code and at the root level
we can see four folders and 10 files to
begin with let's start with the
individual
files first we have package Json which
contains project dependencies and
scripts for dependencies we have next
react and react Dom which are the
essential
packages and then depending on what you
chose in the CLI prompts you have
typescript with types Tailwind with post
CSS and auto prefixer and eslin packages
and for the scripts we have Dev to start
the app in development mode build to
build the app for production
usage start to start the app production
server and finally lend to set up next
year's built-in eslint
configuration a straightforward package.
Chason file with some dependencies and
scripts next we have a few configuration
files we have next. config.js for
nextjs tsconfig do Json for
typescript esent rc. Json for
esent tailin Doc config and post css.
config for tailin
CSS finally we have a few files which we
aren't really concerned about for this
series they include package lock. Chasin
which ensures consistent installation of
our
dependencies get ignore for Version
Control the readme file which contains a
few instructions related to running
building and deploying the
application and next env. D.S which
contains the typescript Declarations for
next all right now let's discuss the
different
folders the first one is the next folder
this folder is generated when we run
either the dev or build Scripts
it is from this folder that our nexts
application is served you'll notice that
the folder is get ignored which means we
don't need to worry about it during
development the second folder is node
modules this is where all the
dependencies of our project are
installed it is generated when you run
the npm install command but in our case
it was created when we executed the dev
script which internally installs the
dependencies if they're not already
present like the next folder this folder
is also get ignored so we don't need to
worry about
it moving on we have the public folder
this is an important folder that holds
all the static assets to be served such
as images and
svgs finally we have the most important
folder for starting our next year's
Journey The Source folder within the
source folder we have one folder called
app which is the newly introduced app
router we will be working inside this
folder for the majority of this course
at the moment we have four different
files fave icon which is the icon you
see in the browser tab when you run the
application global. CSS which contains
the global styles for the
app layout. TSX which is the UI that can
be shared across different pages in your
application and finally page. TSX which
is the unique UI we see on visiting
localhost colon 3000 in the
browser it is the file that we modified
in the previous video the page. TSX jsx
replaces the children prop in layout.
TSX to form the complete UI we see in
the browser of course we will talk more
about these files in the very next
section so don't worry too much right
now to wrap up let's understand the flow
of control when we run this
application when you run the command npm
run Dev in the terminal the execution is
transferred to layout.
TSX the root layout component is
rendered when we navigate to localhost
3000 the children prop will always refer
to the component defined in page. TSX in
the app folder that component is the
home component which is then rendered in
the
browser that is the control flow from
package.json to layout. TSX to page. TSX
to the browser when we run our njs
application now you may be curious about
how the app folder is responsible for
the routing feature in our
application but before we dive into the
section on routing it is important to
understand a few important Concepts
newly introduced in react which form the
foundation of how we write an xgs code
let's see what they are in the next
video thank you for watching please
consider subscribing to the channel and
I'll see you in the next
video
5.0 / 5 (0 votes)