Next.jsの使用を開始する

Next.jsは非常に人気のあるNode.jsフレームワークであり、サーバー側のReactレンダリングを簡単に実行でき、他にも多くのすばらしい機能を提供します。

前書き

現代に取り組んでいますJavaScriptによって供給されるアプリケーションReactクライアント側ですべてのコンテンツをレンダリングすることに関連するいくつかの問題があることに気付くまで、は素晴らしいです。

まず、コンテンツが読み込まれる前にすべてのJavaScriptが読み込まれ、アプリケーションを実行してページに何を表示するかを決定する必要があるため、ページがユーザーに表示されるまでに時間がかかります。

次に、公開されているWebサイトを構築している場合、コンテンツのSEOの問題があります。検索エンジンはJavaScriptアプリの実行とインデックス作成が上手になっていますが、コンテンツを理解させるのではなく、送信できる方がはるかに優れています。

これらの問題の両方に対する解決策はサーバーレンダリング、 とも呼ばれている静的事前レンダリング

Next.jsは、これらすべてを非常に簡単な方法で実行する1つのReactフレームワークですが、これに限定されません。作成者によって次のように宣伝されていますReactアプリ用のゼロ構成のシングルコマンドツールチェーン

これは、フロントエンドReactアプリケーションを簡単に構築し、サーバー側のレンダリングを透過的に処理できるようにする共通の構造を提供します。

主な特徴

Next.jsの主な機能の網羅的ではないリストを次に示します。

  • ホットコードのリロード:Next.jsは、ディスクに保存された変更を検出すると、ページを再読み込みします。
  • 自動ルーティング:任意のURLは、ファイルシステム、に配置されたファイルにマップされます。pagesフォルダーであり、構成は必要ありません(もちろんカスタマイズオプションがあります)。
  • 単一ファイルコンポーネント:使用styled-jsx、同じチームによって構築されたように完全に統合されているため、コンポーネントにスコープを設定したスタイルを追加するのは簡単です。
  • サーバーレンダリング:HTMLをクライアントに送信する前に、(オプションで)サーバー側でReactコンポーネントをレンダリングできます。
  • 生態系の互換性:Next.jsは、JavaScript、Node、Reactエコシステムの残りの部分とうまく連携します。
  • 自動コード分割:ページは、必要なライブラリとJavaScriptだけでレンダリングされ、それ以上はレンダリングされません。
  • プリフェッチLink異なるページをリンクするために使用されるコンポーネントは、prefetchバックグラウンドでページリソース(コード分割によるコードの欠落を含む)を自動的にプリフェッチするprop。
  • 動的コンポーネント:JavaScriptモジュールとReactコンポーネントを動的にインポートできます(https://github.com/zeit/next.js#dynamic-import)。
  • 静的エクスポート:を使用してnext exportコマンド、Next.jsを使用すると、アプリから完全に静的なサイトをエクスポートできます。

インストール

Next.jsは、Linux、macOS、Windowsなどのすべての主要なプラットフォームをサポートしています。

Next.jsプロジェクトはで簡単に開始できますnpm

npm install next react react-dom

入門

作成するpackage.jsonこのコンテンツを含むファイル:

{
  "scripts": {
    "dev": "next"
  }
}

このコマンドを今すぐ実行する場合:

npm run dev

スクリプトは、が見つからないことを訴えるエラーを発生させますpagesフォルダ。 Next.jsを実行するために必要なのはこれだけです。

空を作成するpagesフォルダーに移動し、コマンドを再度実行すると、Next.jsがサーバーを起動します。localhost:3000

今すぐそのURLにアクセスすると、すっきりとしたデザインのフレンドリーな404ページが表示されます。

A 404 page returned by Next.js

Next.jsは、たとえば500エラーなど、他のエラータイプも処理します。

ページを作成

の中にpagesフォルダを作成しますindex.js単純なReact機能コンポーネントを含むファイル:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

あなたが訪問した場合localhost:3000、このコンポーネントは自動的にレンダリングされます。

なぜこれがとても簡単なのですか?

Next.jsは、ファイルシステム構造に基づく宣言型ページ構造を使用します。

ページは中にありますpagesフォルダであり、ページのURLはページのファイル名によって決まります。ファイルシステムはページAPIです。

サーバー側のレンダリング

ページソースを開き、View -> Developer -> View SourceChromeで。

ご覧のとおり、コンポーネントによって生成されたHTMLはページソースで直接送信されます。クライアント側ではなく、サーバー上でレンダリングされます。

Next.jsチームは、基本的なPHPプロジェクトを作成するときに得られるものと同様のサーバーレンダリングページの開発者エクスペリエンスを作成したいと考えていました。たとえば、PHPファイルをドロップして呼び出すと、ページとして表示されます。もちろん内部的にはすべて非常に異なりますが、見た目の使いやすさは明らかです。

2ページ目を追加

で別のページを作成しましょうpages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

あなたがあなたのブラウザを指す場合localhost:3000/contactこのページがレンダリングされます。ご覧のとおり、このページもサーバーでレンダリングされています。

ホットリロード

再起動する必要がなかったことに注意してくださいnpm2番目のページをロードするプロセス。 Next.jsは、内部でこれを行います。

クライアントレンダリング

サーバーレンダリングは、上記のすべての理由から、最初のページの読み込みで非常に便利ですが、Webサイト内の移動に関しては、クライアント側のレンダリングがページの読み込みを高速化し、ユーザーエクスペリエンスを向上させるための鍵となります。

Next.jsはLinkリンクの構築に使用できるコンポーネント。上記の2つのページをリンクしてみてください。

変化するindex.jsこのコードに:

import Link from 'next/link'

export default () => ( <div> <p>Hello World!</p> <Link href=’/contact’> <a>Contact me!</a> </Link> </div> )

次に、ブラウザに戻ってこのリンクを試してください。ご覧のとおり、連絡先ページはページを更新せずにすぐに読み込まれます。

これは正しく機能するクライアント側のナビゲーションであり、履歴API、つまり、ユーザーの戻るボタンが壊れることはありません。

あなたが今ならcmd-clickリンク、同じ連絡先ページが新しいタブで開き、サーバーがレンダリングされます。

動的ページ

Next.jsの良い使用例はブログです。これは、すべての開発者がブログの仕組みを知っているためであり、動的ページの処理方法の簡単な例に適しています。

動的ページは、固定コンテンツがなく、代わりにいくつかのパラメーターに基づいていくつかのデータを表示するページです。

変化するindex.js

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post title=‘Yet another post’ /> <Post title=‘Second post’ /> <Post title=‘Hello, world!’ /> </li> </ul> </div> )

これにより、一連の投稿が作成され、タイトルクエリパラメータに投稿のタイトルが入力されます。

The posts list

次に、post.jsのファイルpagesフォルダ、および追加:

export default (props) => <h1>{props.url.query.title}</h1>

これで、1つの投稿をクリックすると、投稿のタイトルがh1鬼ごっこ:

A single post

クエリパラメータなしでクリーンURLを使用できます。 Next.js Linkコンポーネントは、asスラッグを渡すために使用できる属性:

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post slug=‘yet-another-post’ title=‘Yet another post’ /> <Post slug=‘second-post’ title=‘Second post’ /> <Post slug=‘hello-world’ title=‘Hello, world!’ /> </li> </ul> </div> )

CSS-in-JS

Next.jsはデフォルトでサポートを提供しますstyled-jsx、これは同じ開発チームが提供するCSS-in-JSソリューションですが、次のような任意のライブラリを使用できます。スタイル付きコンポーネント

例:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

スタイルはコンポーネントにスコープされますが、グローバルスタイルを編集して追加することもできますglobalstyle素子:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

静的サイトのエクスポート

Next.jsアプリケーションは、静的サイトとして簡単にエクスポートできます。静的サイトは、次のような超高速の静的サイトホストの1つにデプロイできます。NetlifyまたはFirebaseホスティング、ノード環境をセットアップする必要はありません。

このプロセスでは、サイトを構成するURLを宣言する必要がありますが、それは簡単なプロセス

展開

最終ビルドで必要とされないソースマップやその他の開発ツールを使用せずに、アプリケーションの本番用コピーを作成するのは簡単です。

このチュートリアルの最初に、package.jsonこのコンテンツを含むファイル:

{
  "scripts": {
    "dev": "next"
  }
}

これは、を使用して開発サーバーを起動する方法でしたnpm run dev

次のコンテンツをに追加するだけですpackage.json代わりに:

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

実行してアプリを準備しますnpm run buildそしてnpm run start

Zeitは現在呼ばれていますヴェルセル、このチュートリアルは古くなっている可能性があります

Next.jsの背後にある会社は、Node.jsアプリケーション用の素晴らしいホスティングサービスを提供しています。

もちろん、両方の製品を統合しているため、Next.jsアプリをシームレスにデプロイできます。インストールしたら、を実行することによってnowアプリケーションフォルダ内のコマンド。

舞台裏では、サーバーをセットアップします。何も心配する必要はありません。アプリケーションのURLの準備ができるまで待つだけです。

ゾーン

異なるURLをリッスンするように複数のNext.jsインスタンスを設定できますが、外部ユーザーへのアプリケーションは、単一のサーバーから電力を供給されているように見えます。https://github.com/zeit/next.js/#multi-zones

プラグイン

Next.jsには、プラグインのリストがあります。https://github.com/zeit/next-plugins

グリッチのスターターキット

あなたが実験を探しているなら、私はグリッチをお勧めします。私をチェックしてくださいNext.jsグリッチスターターキット

Next.jsで詳細を読む

この素晴らしいフレームワークのすべての機能を説明することはできないでしょう。Next.jsについてもっと読むための主な場所はGitHubのプロジェクトreadme

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル: