Introduction
ようこそ、Next.js のドキュメンテーションへ！
What is Next.js?
Next.js は、フル stackWeb アプリケーションを構築するための React フレームワークです。ユーザーインターフェースを build するために ReactComponent を使用し、追加の機能や最適化のために Next.js を使用します。
エンジンルームの下では、Next.js はまた、バンドル化、コンパイルなど、React に必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やす代わりに、アプリケーションの構築に集中することができます。
あなたが個別の開発者であろうと、大きなチームの一部であろうと、Next.js はあなたが build という dynamic で、高速な React アプリケーションを作成するのを助けることができます。
Main Features
主な Next.js の特徴には以下のようなものがあります：
| 特徴 | Description |
|---|---|
| ルーティング | レイアウト、ネストされたルーティング、 loading 状態、 error 処理などをサポートする、 Server Components の上に構築されたファイルシステムベースの router 。 |
| レンダリング | クライアント側と Server-side Rendering とともに Client と Server Components 。さらに Static および Dynamic Rendering を使って、 server 上で Next.js により最適化。 Edge および Node.js runtimes でストリーミング。 |
| データ取得 | Server Components での async/await を用いた簡易化されたデータ取得、そして request メモ化、データキャッシング、再検証のための拡張されたfetch API 。 |
| スタイリング | お好みのスタイリング方法に対応しています。これには、 CSS Modules 、 Tailwind CSS 、CSS-in-JS が含まれます。 |
| Optimizations | Image , フォント、スクリプトの最適化により、あなたのアプリケーションの Core Web Vitals とユーザーエクスペリエンスが改善します。 |
| TypeScript | TypeScript のサポートが向上し、より優れた type チェックと効率的なコンパイルが可能になりました。さらに、カスタムの TypeScript Plugin と type チェッカーも導入されました。 |
How to Use These Docs
画面の左側には、docs navbar が表示されます。ドキュメントのページは、基本から高度な内容まで順序立てて整理されているため、アプリケーションを構築する際にはそれらを順を追って確認できます。ただし、任意の順序で読むことも、自分の使用ケースに適用するページにスキップすることも可能です。
画面の右側には、ページのセクション間を移動するのを容易にする目次が表示されます。急いでページを見つける必要がある場合は、上部の検索バーを使用するか、検索ショートカット(Ctrl+KまたはCmd+K)を使用できます。
始めるには、インストールガイドをご覧ください。
App Router vs Pages Router
Next.js には、二つの異なるルーターがあります： App Router と Pages Router。 App Router は新しい router であり、React の最新機能、例えば Server Components やストリーミングを利用することができます。 Pages Router はオリジナルの Next.js router で、Serverrendering された React アプリケーションを構築することができ、古い Next.js アプリケーションに対して引き続きサポートされています。
サイドバーの一番上に、App RouterとPages Routerの機能を切り替えることができるドロップダウンメニューがあることに気づくでしょう。それぞれのディレクトリに固有の機能があるため、どのタブが選択されているのかを把握することが重要です。
ページの上部にあるパンくずリストも、あなたが App Router のドキュメンテーションを見ているのか、Pages Router のドキュメンテーションを見ているのかを示します。
Pre-Requisite Knowledge
私たちのドキュメントは初心者に優しい設計になっていますが、Next.js の機能に集中できるように基準を設定する必要があります。新しい概念を紹介するたびに、関連するドキュメンテーションへのリンクを提供するようにします。
私たちのドキュメントを最大限に活用するためには、基本的に HTML、CSS、そして React の理解が推奨されます。もしあなたが React のスキルを磨く必要があるなら、基本を紹介するReact 基礎コースをチェックしてみてください。その後、dashboard アプリケーションを作成することで Next.js についてさらに学んでみてください。
Accessibility
スクリーンリーダーを使用してドキュメントを読む際の最適なアクセシビリティのために、Firefox と NVDA、または Safari と VoiceOver の使用をお勧めします。
Join our Community
Next.js に関連する何かについて質問がある場合は、いつでも GitHub Discussions 、Discord 、Twitter 、そして Reddit で私たちのコミュニティに質問していただくことを歓迎します。