はじめに

Next.js のドキュメントへようこそ!

Next.js を初めて使用する場合は、学習コースから始めることをお勧めします。

学習コースは翻訳されていません。

インタラクティブなクイズによる学習コースでは、Next.js を使うために必要なすべての知識を習得できます。

Next.js に関連事項する質問がある場合は、GitHub Discussionsのコミュニティーでなんでも質問してください。

システム要件

  • Node.js 10.13 または、それ以降
  • MacOS, Windows(WSL を含む)、そして Linux をサポート

セットアップ

すべてを自動的にセットアップする create-next-app を使って、Next.js アプリを作成することをお勧めします。プロジェクトを作成するために、次を実行します:

npx create-next-app
# または
yarn create next-app

インストールの完了後、指示に従って開発サーバーを起動してみましょう。pages/index.jsを編集して、ブラウザで確認してください。

マニュアル設定

あなたのプロジェクトに、next,reactそして react-dom をインストールしてください。

npm install next react react-dom

package.jsonを開いて、scriptsに追加してください:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

これらのスクリプトは、アプリケーション開発のさまざまな段階に当てはまります。

  • dev - nextは Next.js を開発モードで実行します。
  • build - next buildは本番用にアプリケーションをビルドします。
  • start - next startは Next.js の本番サーバーを起動します。

Next.js は pages の概念を中心に構築されます。pageとは pages ディレクトリの .js.jsx.ts、または .tsx ファイルからエクスポートされたReact コンポーネントです。

ページはファイル名に基づいて、ルーティングに紐づけられます。例えば、pages/about.js/about にマップされます。ファイル名によって動的パラメータを追加できます。

プロジェクトの pages ディレクトリの中に作成してください。

./pages/index.jsの中に次の内容を記載します:

function HomePage() {
  return <div>Welcome to Next.js!</div>;
}

export default HomePage;

アプリケーションの開発を始めるために、npm run devを実行します。これで、http://localhost:3000で開発サーバーが起動します。

アプリケーションを表示するために、http://localhost:3000にアクセスしてください。

これまでのところ:

さらに、すべての Next.js アプリケーションは最初から本番環境で使用できます。詳細は、デプロイメントのドキュメントをご覧ください。

関連事項

以下のセクションを次に読むことをお勧めします。