Merge branch 'master' into chore/update-advanced-features-custom-server

Author: Shinyaigeek

docs/advanced-features/amp-support/adding-amp-components.md

@@ -4,7 +4,7 @@ description: AMPコミュニティのコンポーネントを追加して、よ
 
 # AMPコンポーネントの追加
 
-AMPコミュニティは、よりインタラクティブなAMPページを作成するのに役立つ [たくさんのコンポーネント](https://amp.dev/documentation/components/) を提供しています。 Next.js はページで使用されるすべてのコンポーネントを自動的にインポートするので、AMPコンポーネントのスクリプトを手動でインポートする必要はありません:
+AMP コミュニティは、よりインタラクティブな AMP ページを作成するのに役立つ [たくさんのコンポーネント](https://amp.dev/documentation/components/) を提供しています。 Next.js はページで使用されるすべてのコンポーネントを自動的にインポートするので、AMP コンポーネントのスクリプトを手動でインポートする必要はありません:
 
 ```jsx
 export const config = { amp: true };
@@ -49,7 +49,12 @@ function MyAmpPage() {
       </Head>
 
       <p>Some time: {date.toJSON()}</p>
-      <amp-timeago width="0" height="15" datetime={date.toJSON()} layout="responsive">
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+      >
         .
       </amp-timeago>
     </div>

docs/advanced-features/amp-support/amp-in-static-html-export.md

@@ -27,7 +27,7 @@ Next.js は、HTML ページに AMP ページへのリンクを自動的に挿
 <link rel="canonical" href="/about" />
 ```
 
-[`exportTrailingSlash`](/docs/api-reference/next.config.js/exportPathMap.md#0cf7d6666b394c5d8d08a16a933e86ea) を有効にすると、 `pages/about.js` は以下のようにエクスポートされます:
+[`trailingSlash`](/docs/api-reference/next.config.js/trailingSlash.md) を有効にすると、 `pages/about.js` は以下のようにエクスポートされます:
 
 - `out/about/index.html` - HTML ページ
 - `out/about.amp/index.html` - AMP ページ

docs/advanced-features/amp-support/amp-validation.md

@@ -7,3 +7,27 @@ description: AMPページは、開発時やビルド時にNext.jsによって自
 AMP ページは開発時に [amphtml-validator](https://www.npmjs.com/package/amphtml-validator) によって自動的に検証されます。 エラーや注意事項は Next.js を起動したターミナルに表示されます。
 
 ページは [静的 HTML のエクスポート](/docs/advanced-features/static-html-export.md) 時にも検証され、エラーや注意事項はターミナルに表示されます。有効ではない AMP のエクスポートによって、AMP のエラーが発生した場合は、ステータスコード `1` で処理を終了します。
+
+### 検証のカスタム
+
+以下のような `next.config.js` によって、AMP ページの検証をカスタマイズできます。
+
+```jsx
+module.exports = {
+  amp: {
+    validator: './custom_validator.js',
+  },
+}
+```
+
+### 検証のスキップ
+
+AMP ページの検証をオフにする場合は、`next.config.js` に以下のコードを追加します。
+
+```jsx
+experimental: {
+  amp: {
+    skipValidation: true
+  }
+}
+```

docs/advanced-features/automatic-static-optimization.md

@@ -21,22 +21,30 @@ description: Next.js は可能であれば静的な HTML へとアプリケー
 
 プリレンダリング中は、この段階で使用できる `query` の情報がないため、 `query` は空オブジェクトになります。ハイドレーション後は、 `query` オブジェクト内のルートパラメータをアプリケーションに与えるように、 Next.js がアプリケーションを更新します。
 
-> **備考:** [動的なルーティング](/docs/routing/dynamic-routes.md)と共に [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) を用いたページに与えられたパラメータは、いつでも `query` オブジェクト内で使用可能です。
+ハイドレーションの後にクエリが更新され、さらにレンダリングが生じるケースは以下の通りです。
+
+- ページが [dynamic-route](/docs/routing/dynamic-routes.md) である場合
+- ページが URL にクエリの値を持っている場合
+- `next.config.js` で [Rewrites](/docs/api-reference/next.config.js/rewrites.md) が設定されている場合。これらは `query` として解析、提供されるべきパラメータを含み得るためです。
+
+クエリが全て更新され使用可能な状態になったかどうか判断するためには、[`next/router`](/docs/api-reference/next/router.md#router-object) に存在する `isReady` フィールドを利用できます。
+
+> **備考:** [動的なルーティング](/docs/routing/dynamic-routes.md)と共に [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) を用いたページに与えられたパラメータは、いつでも `query` オブジェクト内で使用可能です。****
 
 `next build` は静的最適化がされたページに対して `.html` ファイルを出力します。例えば、 `pages/about.js` のページに対するビルド結果は以下のようになります:
 
 ```bash
-.next/server/static/${BUILD_ID}/about.html
+.next/server/pages/about.html
 ```
 
 `getServerSideProps` をページに加えると、今度はビルド結果が以下のような JavaScript ファイルになります:
 
 ```bash
-.next/server/static/${BUILD_ID}/about.js
+.next/server/pages/about.js
 ```
 
 ## 注意事項
 
-- `getInitialProps` を用いた[カスタム `App` ](/docs/advanced-features/custom-app.md)の場合、[静的生成](/docs/basic-features/data-fetching.md#getstaticprops-static-generation)なしのページではこの最適化はオフになります。
+- `getInitialProps` を用いた[カスタム `App` ](/docs/advanced-features/custom-app.md)の場合、[静的生成](/docs/basic-features/data-fetching/get-static-props.md)なしのページではこの最適化はオフになります。
 
 - `getInitialProps` を用いた[カスタム `Document` ](/docs/advanced-features/custom-document.md)の場合は、ページがサーバーサイドでレンダリングされると仮定する前に `ctx.req` が定義されているかどうかを確認してください。`ctx.req` はプリレンダリングされるページでは `undefined` になります。

docs/advanced-features/dynamic-import.md

@@ -4,7 +4,7 @@ description: JavaScriptモジュールとReactコンポーネントを動的に
 
 # 動的インポート
 
-<details>
+<details open>
   <summary><b>例</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import">動的インポート</a></li>
@@ -13,8 +13,36 @@ description: JavaScriptモジュールとReactコンポーネントを動的に
 
 Next.js は JavaScript の ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) をサポートしています。JavaScript モジュール（React コンポーネントを含む）を動的にインポートして使うことが出来ます。SSR にも対応しています。
 
+In the following example, we implement fuzzy search using `fuse.js` and only load the module dynamically in the browser after the user types in the search input:
+
+```jsx
+import { useState } from 'react'
+const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+export default function Page() {
+  const [results, setResults] = useState()
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // Dynamically load fuse.js
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
 動的インポートは、コードを扱いやすいチャンクに分割する、もう 1 つの方法と考えることができます。
 
+React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works like any other React Component. Check out the sections below for more details on how it works.
+
 ## 基本的な使用方法
 
 次の例では、`../components/hello`モジュールがページで動的に読み込まれています:
@@ -39,6 +67,8 @@ export default Home;
 
 `DynamicComponent`は `../components/hello` から返されるデフォルトのコンポーネントです。通常の React コンポーネントのように動き、通常どおりに props を渡すことができます。
 
+> **Note**: In `import('path/to/component')`, the path must be explicitly written. It can't be a template string nor a variable. Furthermore the `import()` has to be inside the `dynamic()` call for Next.js to be able to match webpack bundles / module ids to the specific `dynamic()` call and preload them before rendering. `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to `React.lazy`.
+
 ## 名前付きエクスポート
 
 動的コンポーネントがデフォルトのエクスポートでない場合は、名前付きエクスポートも使用できます。名前付きエクスポートの `Hello` を持つ `../components/hello.js` モジュールについて考えてみましょう:
@@ -116,3 +146,23 @@ function Home() {
 
 export default Home;
 ```
+
+## With suspense
+
+Option `suspense` allows you to lazy-load a component, similar to `React.lazy` and `<Suspense>` with React 18. Note that it only works on client-side or server-side with `fallback`. Full SSR support in concurrent mode is still a work-in-progress.
+
+```jsx
+import dynamic from 'next/dynamic'
+const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
+  suspense: true,
+})
+function Home() {
+  return (
+    <div>
+      <Suspense fallback={`loading`}>
+        <DynamicLazyComponent />
+      </Suspense>
+    </div>
+  )
+}
+```