そこで、 Create React App を試してみましたが、「確かに、それは素晴らしいことですが、コード分割、ユニバーサルアーキテクチャ、および構成コストがゼロの強力なルーターが必要な場合はどうでしょうか。 」 もしそうなら、あなたは運がいいです。

Zeitの次のレベルのエンジニアからNext.jsを入力してください。これは、Reactの最も望ましい機能のいくつかを備えた、免税のシンプルな定型文です。

通常の方法から始めます。つまり、プロジェクトのディレクトリを作成し、package.jsonで初期化します。 そのファイルに次のスクリプトを追加する必要があります。

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

次に、pagesstatic、およびcomponentsのディレクトリをいくつか追加します。

最後のものは厳密には必須ではありませんが、すぐに役立ちます。 🐿

$ npm install next --save

以上です。 あなたはすべての鐘と笛で構成されています。 それがどのように機能するかを掘り下げてみましょう。

A sample directory view with a glimpse of the index script.

最初に注意することは、pagesディレクトリ内のすべての.jsファイルが自動的にルーティングされることです—index.js/にルーティングされます。 bite.js/biteにルーティングします。 等々。 これは、コード分割が発生する場所でもあり、各個別のページは、スコープの依存関係と該当する場合はサーバーレンダリングを備えた個別のバンドルを取得します。

次に、CDNを使用してブラウザーのキャッシュを活用し、Reactの提供を効率化します。 🚀ローカルフォールバックがあり、オフにすることができます。

私たちはそれをそこに残すことができ、彼らが立っているので物事はクールになるでしょう、しかし待ってください、もっとあります。

import Link from 'next/link';
  ...
<Link href={`about?story=${assets.story}`}>About This Site</Link>

そして、そこにあなたの怠惰な読み込みがあります。 必要に応じてNextのLinkコンポーネントを使用すると、その下の機械がそこからそれを取得します。 さらに、鋭敏な観察者はhrefのそのクエリ文字列に注意し、その鋭敏な目は報われるでしょう。 Linkをクリックすると、urlという小道具が届き、queryにアクセスできます。

これは、そのcomponentsディレクトリに再度アクセスする絶好の機会です。 ページがこのような手間のかかる作業をすべて行っているので、ルーティングをクリーンに保つために、よりモジュール化されたオッズとエンドを格納する場所が必要になります。

Nextの袖のもう一つのクールなトリックは、この悪い男の子です:

import React from 'react';
import Head from 'next/head';

export default ({title}) => {
  return <Head>
      <title>{title}</title>
      <link rel="stylesheet" href="static/styles.css" />
    </Head>
}

Headコンポーネントを使用すると、ドキュメントヘッドを動的に再構成できます。 非常に便利です。

import React from 'react';
import css from 'next/css';

let p = css({
  color: '#858576',
  fontSize: 32
});

export default ({caption}) => <p {...p}>{caption}</p>

同様に便利なのは、チームにGlamorインラインCSSモジュールが含まれていることです。 古い方法も、バニラオブジェクトやrequireステートメントに至るまで機能しますが、それはいい感じです。

⚠️️NextがAPIの側面を変更するメジャーリリース(2.xx)に近づいていること、およびGithubのreadmeがnpm(^ 1.2.3)を介してインストールしているバージョンと同期していないことは注目に値します。

そして最後のトリックとして、少しのデータフェッチですべてをまとめましょう。 Next.jsは、データ収集のニーズに合わせてgetInitialPropsのすべての栄光を維持しますが、他に使用するツールについては規定していません。 本当に重要なのは、ブラウザとサーバーの両方で実行されるため、ブラウザとサーバーに等しく適したものを使用することです。

import React from 'react';
import axios from 'axios';

export default class extends React.Component {
  static async getInitialProps () {
    const res = await axios.get('https://api.npmjs.org/downloads/point/last-week/next');
    return {nextNpmDownloads: res.data.downloads};
  }
  render () {
    return <div>
      {`Did you know Next has had ${this.props.nextNpmDownloads} on npm in the last month?`}
    </div>
  }
}

残っているのは、npm run devの開発サーバーを起動し、ブラウザーをポート3000に向けて、最も洗練された形式でシンプルに挨拶することだけです。

👉それがクールだと思うなら、私たちがそれを展開するまで待ってください。