next

Reactを使用して完全なWebアプリケーションを最初から構築するには、考慮する必要のある重要な詳細が多数あります。

• コードは、webpackのようなバンドラーを使用してバンドルし、Babelのようなコンパイラーを使用して変換する必要があります。
• コード分​​割などの本番環境の最適化を行う必要があります。
• パフォーマンスとSEOのために、いくつかのページを静的に事前レンダリングすることをお勧めします。サーバー側のレンダリングまたはクライアント側のレンダリングを使用することもできます。
• Reactアプリをデータストアに接続するには、サーバー側のコードを作成する必要がある場合があります。

フレームワークは、これらの問題を解決することができます。ただし、このようなフレームワークには適切なレベルの抽象化が必要です。そうでない場合、あまり役に立ちません。また、優れた「開発者エクスペリエンス」を備えている必要があります。これにより、コードの記述中にあなたとあなたのチームが素晴らしいエクスペリエンスを体験できるようになります。

Next.js：Reactフレームワーク

Next.js、ReactFrameworkと入力します。Next.jsは、上記のすべての問題に対する解決策を提供します。しかし、もっと重要なことは、Reactアプリケーションを構築するときにあなたとあなたのチームを成功の落とし穴に置くことです。

Next.jsは、クラス最高の開発者エクスペリエンスと、次のような多くの組み込み機能を提供することを目的としています。

• 直感的なページベースのルーティングシステム（動的ルートをサポート）
• 事前レンダリング、静的生成（SSG）とサーバー側レンダリング（SSR）の両方がページごとにサポートされます
• ページの読み込みを高速化するための自動コード分割
• 最適化されたプリフェッチを使用したクライアント側ルーティング
• 組み込みのCSSとSassのサポート、および任意のCSS-in-JSライブラリのサポート
• 高速更新をサポートする開発環境
• サーバーレス関数を使用してAPIエンドポイントを構築するためのAPIルート
• 完全に拡張可能

Next.jsは、世界最大のブランドの多くを含む、何万もの本番環境向けWebサイトおよびWebアプリケーションで使用されています。

このチュートリアルについて

この無料のインタラクティブコースでは、Next.jsの使用を開始する方法について説明します。

このチュートリアルでは、非常にシンプルなブログアプリを作成して、Next.jsの基本を学びます。最終結果の例を次に示します。

https://next-learn-starter.vercel.app（ソース）

始めましょう！

設定

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

cd nextjs-blog

npm run dev

Next.jsへようこそ

http：// localhost：3000にアクセスすると、次のようなページが表示されます。これは、Next.jsに関する役立つ情報を表示するスターターテンプレートページです。

ヘルプが利用可能です：行き詰まった場合は、GitHubディスカッションでコミュニティに連絡できます。

次にこのページを編集してみましょう！

Next.jsアプリを作成する

1

2

3

4

ページの編集

スターターページを編集してみましょう。

• Next.js開発サーバーがまだ実行されていることを確認してください。
• pages/index.jsテキストエディタで開きます。
• タグの下にある「ようこそ」というテキストを見つけて、「学習」に<h1>変更します。
• ファイルを保存します。

ファイルを保存するとすぐに、ブラウザは新しいテキストでページを自動的に更新します。

Next.js開発サーバーで高速更新が有効になっています。ファイルに変更を加えると、Next.jsはブラウザにほぼ瞬時に変更を自動的に適用します。リフレッシュは必要ありません！これにより、アプリをすばやく反復処理できます。

次は：ページの作成

よくやった！最初のレッスンは以上です。

次のレッスンでは、さらにページを作成し、ページ間を移動する方法について説明します。

開発サーバーは実行し続ける必要がありますが、再起動する場合は、を押しCtrl + cてサーバーを停止します。

ページ間を移動する

1

2

3

4

5

これまでのところ、作成したNext.jsアプリには1ページしかありません。WebサイトとWebアプリケーションには、通常、さまざまなページがあります。

アプリケーションにページを追加する方法を見てみましょう。

このレッスンで学ぶこと

このレッスンでは、次のことを行います。

• 統合ファイルシステムルーティングを使用して新しいページを作成します。
• Linkコンポーネントを使用してページ間のクライアント側ナビゲーションを有効にする方法を学びます。
• コード分​​割とプリフェッチの組み込みサポートについて学びます。

あなたはNext.jsルーティングに関する詳細なドキュメントを探しているなら、見とるルーティングドキュメントを。

Next.jsのページ

Next.jsでは、ページはpagesディレクトリ内のファイルからエクスポートされたReactコンポーネントです。

ページは、ファイル名に基づいてルートに関連付けられます。たとえば、開発中：

• pages/index.js/ルートに関連付けられています。
• pages/posts/first-post.js/posts/first-postルートに関連付けられています。

すでにpages/index.jsファイルがあるので、作成pages/posts/first-post.jsしてどのように機能するかを見てみましょう。

新しいページを作成する

のposts下にディレクトリを作成しますpages。

次の内容でディレクトリfirst-post.js内に呼び出されるファイルを作成しますposts。

export default function FirstPost() {
  return <h1>First Post</h1>
}

コンポーネントには任意の名前を付けることができますが、defaultエクスポートとしてエクスポートする必要があります。

ここで、開発サーバーが実行されていることを確認し、http：// localhost：3000 / posts / first-postにアクセスします。次のページが表示されます。

これは、Next.jsでさまざまなページを作成する方法です。

pagesディレクトリの下にJSファイルを作成するだけで、ファイルへのパスがURLパスになります。

ある意味で、これはHTMLまたはPHPファイルを使用してWebサイトを構築することに似ています。HTMLを書く代わりに、JSXを書き、Reactコンポーネントを使用します。

ホームページから移動できるように、新しく追加したページへのリンクを追加しましょう。

リンクコンポーネント

Webサイトのページ間をリンクするときは、<a>HTMLタグを使用します。

Next.jsでは、Linkコンポーネントfromnext/linkを使用して<a>タグをラップします。<Link>アプリケーションの別のページへのクライアント側のナビゲーションを実行できます。

使用する <Link>

まず、を開きpages/index.js、上部に次の行を追加して、Linkからコンポーネントをインポートしますnext/link。

import Link from 'next/link'

次にh1、次のようなタグを見つけます。

<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

そしてそれを次のように変更します：

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

{' '} テキストを複数行に分割するために使用される空のスペースを追加します。

次に、pages/posts/first-post.jsそのコンテンツを開いて次のように置き換えます。

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

ご覧のとおり、Linkコンポーネントは<a>タグの使用に似ていますが、の代わりに<a href="…">、タグを使用<Link href="…">して<a>内部に配置します。

それが機能するかどうかを確認しましょう。これで、各ページにリンクが表示され、前後に移動できるようになります。

クライアント側のナビゲーション

このLinkコンポーネントは、同じNext.jsアプリ内の2つのページ間のクライアント側のナビゲーションを可能にします。

クライアント側のナビゲーションとは、JavaScriptを使用してページ遷移が発生することを意味します。これは、ブラウザによって実行されるデフォルトのナビゲーションよりも高速です。

確認する簡単な方法は次のとおりです。

• ブラウザの開発者ツールを使用して、のbackgroundCSSプロパティをに変更<html>しyellowます。
• リンクをクリックして、2つのページ間を行き来します。
• ページ遷移の間、黄色の背景が持続することがわかります。

これは、ブラウザがページ全体をロードせず、クライアント側のナビゲーションが機能していることを示しています。

<a href="…">代わりにこれを使用した場合<Link href="…">、ブラウザは完全に更新されるため、リンクをクリックすると背景色がクリアされます。

コードの分割とプリフェッチ

Next.jsはコード分割を自動的に行うため、各ページはそのページに必要なものだけをロードします。つまり、ホームページがレンダリングされるときに、他のページのコードは最初は提供されません。

これにより、数百ページある場合でもホームページがすばやく読み込まれます。

リクエストしたページのコードを読み込むだけで、ページが分離されることも意味します。特定のページがエラーをスローした場合でも、アプリケーションの残りの部分は引き続き機能します。

さらに、Next.jsの本番ビルドでは、Linkコンポーネントがブラウザのビューポートに表示されるたびに、Next.jsはバックグラウンドでリンクされたページのコードを自動的にプリフェッチします。リンクをクリックするまでに、リンク先ページのコードはすでにバックグラウンドで読み込まれており、ページ遷移はほぼ瞬時に行われます。

概要

Next.jsは、コード分割、クライアント側ナビゲーション、およびプリフェッチ（本番環境）によって、アプリケーションを自動的に最適化して最高のパフォーマンスを実現します。

の下にファイルとしてルートを作成しpages、組み込みLinkコンポーネントを使用します。ルーティングライブラリは必要ありません。

Linkコンポーネントの詳細については、ルーティングドキュメントのAPIリファレンスnext/linkとルーティング全般をご覧ください。

ABOUT ME

たけ

はじめまして! たけといいます。 20代男性サラリーマンが資産運用で5年で3000万をめざします。 これを読んで自分でも出来るのではないかと思ってくれる人が増えると嬉しいです。 お金を得ることは手段に過ぎません。若いうちに稼いで、自分の時間をより大切なことに使いたいです。 【2019投資戦歴】 投資資金合計 300万 2019年度単年損益(年利) FX 15万(15%) 投信 9万(7%) 株式 4万(8%) ※投信、株式は含み益