Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

konjacbot: sync docs@697aff9 #287

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ about: Create a report to help us improve
title: ''
labels: ''
assignees: ''

---

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
Expand All @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]

- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]

**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

**Additional context**
Add any other context about the problem here.
1 change: 0 additions & 1 deletion .github/ISSUE_TEMPLATE/issue_template.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ about: Standard issue template for Nextjs-docs-ja
title: ''
labels: ''
assignees: ''

---

#### Description
Expand Down
262 changes: 131 additions & 131 deletions docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx

Large diffs are not rendered by default.

439 changes: 219 additions & 220 deletions docs/01-app/02-building-your-application/04-caching/index.mdx

Large diffs are not rendered by default.

195 changes: 95 additions & 100 deletions docs/01-app/02-building-your-application/06-optimizing/02-videos.mdx

Large diffs are not rendered by default.

212 changes: 117 additions & 95 deletions docs/01-app/02-building-your-application/07-configuring/05-mdx.mdx

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
title: 'カスタムサーバー'
description: 'カスタムサーバーを使用して、プログラムによってNext.jsアプリをスタートします。'
title: 'Custom Server'
description: 'カスタムサーバーを使用してプログラム的にNext.jsアプリを起動する方法。'
---

{/* このドキュメントの内容はapp routerとpages routerの間で共有されます。Pages Routerに特化したコンテンツを追加するには `<PagesOnly>Content</PagesOnly>` コンポーネントを使用できます。共有したコンテンツはコンポーネントでラップしないでください。 */}
{/* このドキュメントの内容は、app routerとpages routerの両方に共有されています。Pages Routerに固有のコンテンツを追加するには、 `<PagesOnly>Content</PagesOnly>` コンポーネントを使用できます。共有されているコンテンツは、コンポーネントでラップすべきではありません。 */}

Next.jsにはデフォルトで`next start`が付属しています。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーは、カスタムパターン用にプログラムでサーバーを開始することを可能にします。ほとんどの場合、このアプローチが必要になることはありません。ただし、必要に応じて使用可能です
Next.jsは、デフォルトで`next start`と共に独自のサーバーを含んでいます。既存のバックエンドがある場合でも、それをNext.jsと一緒に使用することができます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーは、カスタムのパターンでサーバーをプログラム的に起動することを可能にします。ほとんどの場合、このアプローチは必要ありません。ただし、必要がある場合は利用可能です

> **Good to know**:
>
> - カスタムサーバーを使用することを決める前に、Next.jsの統合されたrouterがアプリの要件を満たせない場合にのみ使用されるべきであることを忘れないでください。カスタムサーバーは、**[Automatic Static Optimization](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)** のような重要なパフォーマンス最適化を削除します。
> - カスタムサーバーは、[Vercel](https://vercel.com/frameworks/nextjs) にデプロイすることが**できません**
> - スタンドアロンの出力モードを使用すると、カスタムサーバーファイルがトレースされません。このモードは、代わりに最小限の `server.js` ファイルを別々に出力します。これらは一緒に使用することができません
> - カスタムサーバーを使用する前に、Next.js の統合されたルーターがアプリの要件を満たせない場合にのみ使用すべきであることを覚えておいてください。カスタムサーバーは、**[Automatic Static Optimization](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)**のような重要なパフォーマンス最適化を削除します。
> - カスタムサーバーは[ Vercel](https://vercel.com/frameworks/nextjs)にデプロイできません
> - 自立型出力モードを使用する場合、カスタムサーバーのファイルを追跡しません。このモードでは、代わりに最小の`server.js`ファイルを別に出力します。これらは一緒に使用できません

カスタムサーバーの[以下の例](https://github.com/vercel/next.js/tree/canary/examples/custom-server)をご覧ください:
カスタムサーバーの[次の例](https://github.com/vercel/next.js/tree/canary/examples/custom-server)をご覧ください:

<Tabs>
<TabItem value="ts" label="TypeScript">
Expand All @@ -23,18 +23,23 @@ import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'

// コメント:ポート番号を取得
const port = parseInt(process.env.PORT || '3000', 10)
// コメント:開発モードかどうかのチェック
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
// コメント:リクエストハンドラを取得
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer((req, res) => {
// コメント:URLを解析
const parsedUrl = parse(req.url!, true)
handle(req, res, parsedUrl)
}).listen(port)

console.log(
// コメント:サーバーがリッスンしていることをコンソールに出力
`> Server listening at http://localhost:${port} as ${
dev ? 'development' : process.env.NODE_ENV
}`
Expand All @@ -50,18 +55,23 @@ import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'

// コメント:ポート番号を取得
const port = parseInt(process.env.PORT || '3000', 10)
// コメント:開発モードかどうかのチェック
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
// コメント:リクエストハンドラを取得
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer((req, res) => {
// コメント:URLを解析
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
}).listen(port)

console.log(
// コメント:サーバーがリッスンしていることをコンソールに出力
`> Server listening at http://localhost:${port} as ${
dev ? 'development' : process.env.NODE_ENV
}`
Expand All @@ -72,7 +82,7 @@ app.prepare().then(() => {
</TabItem>
</Tabs>

> `server.js` はNext.jsのコンパイラやバンドルプロセスを通過しません。このファイルが必要とする構文とソースコードが、使用している現在のNode.jsバージョンと互換性があることを確認してください。[例を見る](https://github.com/vercel/next.js/tree/canary/examples/custom-server).
> `server.js`は、Next.js Compilerやバンドリングプロセスを通過しません。このファイルが要求する構文とソースコードが使用中のNode.jsのバージョンと互換性があることを確認してください。[例を参照してください](https://github.com/vercel/next.js/tree/canary/examples/custom-server)

カスタムサーバーを実行するには、`package.json`の`scripts`を次のように更新する必要があります:

Expand All @@ -86,46 +96,45 @@ app.prepare().then(() => {
}
```

または、`nodemon`をセットアップすることができます([例](https://github.com/vercel/next.js/tree/canary/examples/custom-server))。カスタムサーバーは、Next.jsアプリケーションとの接続に次のインポートを使用します
代替として、`nodemon`を設定することもできます([例](https://github.com/vercel/next.js/tree/canary/examples/custom-server))。カスタムサーバーは、Next.jsアプリとサーバーを接続するために次のインポートを使用します

```js
import next from 'next'

const app = next({})
```

上記の`next`インポートは、次のオプションを含むオブジェクトを受け取る関数です
上記の`next`インポートは、以下のオプションを含むオブジェクトを受け取る関数です

| Option | Type | Description |
| -------------- | ------------------ | --------------------------------------------------------------------------------------------- |
| `conf` | `Object` | `next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}` |
| `customServer` | `Boolean` | (_オプション_)サーバーがNext.jsによって作成された場合にfalseに設定 |
| `dev` | `Boolean` | (_オプション_)Next.jsを開発モードで起動するかどうか。デフォルトは`false` |
| `dir` | `String` | (_オプション_)Next.jsのプロジェクトの場所。デフォルトは`'.'` |
| `quiet` | `Boolean` | (_オプション_)サーバー情報を含むエラーメッセージを非表示にするかどうか。デフォルトは`false` |
| `hostname` | `String` | (_オプション_)サーバーが稼働しているホスト名 |
| `port` | `Number` | (_オプション_)サーバーが稼働しているポート |
| `httpServer` | `node:http#Server` | (_オプション_)Next.jsが稼働しているHTTPサーバ |
| `turbo` | `Boolean` | (_オプション_)Turbopackを有効にする |
| オプション | タイプ | 説明 |
| ------------ | ------------------ | ------------------------------------------------------------------------------------ |
| `conf` | `Object` | `next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}` |
| `dev` | `Boolean` | (_オプション_) Next.jsを開発モードで起動するかどうか。デフォルトは`false` |
| `dir` | `String` | (_オプション_) Next.jsプロジェクトの場所。デフォルトは`'.'` |
| `quiet` | `Boolean` | (_オプション_) サーバー情報を含むエラーメッセージを非表示にする。デフォルトは`false` |
| `hostname` | `String` | (_オプション_) サーバーが実行されているホスト名 |
| `port` | `Number` | (_オプション_) サーバーが実行されているポート |
| `httpServer` | `node:http#Server` | (_オプション_) Next.jsが実行されているHTTPサーバー |
| `turbo` | `Boolean` | (_オプション_) Turbopackを有効にする |

返された`app`を使用して、Next.jsが必要に応じてリクエストを処理することができます
返される`app`を使用して、Next.jsがリクエストを要求に応じて処理するようにすることができます

<PagesOnly>

## ファイルシステムルーティングを無効にする {#disabling-file-system-routing}

デフォルトでは、`Next`は各ファイルを`pages`フォルダ内のファイル名と一致するパス名の下で提供します。あなたのプロジェクトがカスタムサーバーを使用している場合、この動作は複数のパスから同じコンテンツが提供されることになり、SEOおよびUXの問題を引き起こす可能性があります
デフォルトでは、`Next``pages`フォルダ内の各ファイルをファイル名に対応するパス名で提供します。プロジェクトがカスタムサーバーを使用している場合、この動作により、同じコンテンツが複数のパスから提供されることになり、SEOやUXに問題が生じる可能性があります

この動作を無効にし、`pages`内のファイルに基づくルーティングを防止するには、`next.config.js`を開き、`useFileSystemPublicRoutes`設定を無効にします:
この動作を無効にして、`pages`内のファイルに基づいたルーティングを防ぐためには、`next.config.js`を開いて、`useFileSystemPublicRoutes`設定を無効にします:

```js title="next.config.js"
module.exports = {
useFileSystemPublicRoutes: false,
}
```

> `useFileSystemPublicRoutes`はサーバサイドレンダリングからのファイル名ルートを無効にすることを注意してください。クライアントサイドルーティングはそれらのパスにまだアクセスできるかもしれません。このオプションを使用する場合、ネイティブなナビゲーションから意図したくないルートへとプログラム的にガードするべきです
> `useFileSystemPublicRoutes`はSSRからファイル名ルートを無効にします;クライアントサイドのルーティングはそれらのパスにアクセスする可能性があります。このオプションを使用する場合、意図しないルートへのナビゲーションをプログラム的に防ぐ必要があります

> クライアントサイドルータを設定して、クライアントサイドでのファイル名ルートへのリダイレクトを禁止することも検討したいかもしれません。詳細は[`router.beforePopState`](https://nextjs.org/docs/canary/pages/api-reference/functions/use-router#routerbeforepopstate) を参照してください。
> クライアントサイドルーターがファイル名ルートへのクライアントサイドリダイレクトを許可しないように設定することも望ましいかもしれません;そのためには[`router.beforePopState`](https://nextjs.org/docs/canary/pages/api-reference/functions/use-router#routerbeforepopstate)を参照してください。

</PagesOnly>
Loading