そこで、 Create React App を試してみましたが、「確かに、それは素晴らしいことですが、コード分割、ユニバーサルアーキテクチャ、および構成コストがゼロの強力なルーターが必要な場合はどうでしょうか。 」 もしそうなら、あなたは運がいいです。
Zeitの次のレベルのエンジニアからNext.jsを入力してください。これは、Reactの最も望ましい機能のいくつかを備えた、免税のシンプルな定型文です。
通常の方法から始めます。つまり、プロジェクトのディレクトリを作成し、package.json
で初期化します。 そのファイルに次のスクリプトを追加する必要があります。
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
次に、pages
、static
、およびcomponents
のディレクトリをいくつか追加します。
最後のものは厳密には必須ではありませんが、すぐに役立ちます。 🐿
$ npm install next --save
以上です。 あなたはすべての鐘と笛で構成されています。 それがどのように機能するかを掘り下げてみましょう。
最初に注意することは、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に向けて、最も洗練された形式でシンプルに挨拶することだけです。
👉それがクールだと思うなら、私たちがそれを展開するまで待ってください。