Git Product home page Git Product logo

nextjs-ja-translation-docs's Introduction

Nextjs-ja-translation-docs

All Contributors

reviewdog

Next.js のドキュメントを翻訳する非公式プロジェクトです。

本家公式ドキュメント

本家ドキュメントへの追従方針

  • 本家で新規作成されたファイルは追加する
  • 未翻訳のファイルが本家で更新されていたら更新する
  • 翻訳の有無関わらず本家で削除されたファイルは削除する
  • // #TODO: 翻訳済ファイルの追従方針を決める

翻訳手順

翻訳の状況は、翻訳の概要と進捗状況の issues を確認してください。

手順1:翻訳を始める準備

まずは、このリポジトリを右上から Fork してください。

そして、リポジトリをクローンします。yourには、あなたの GitHub のユーザーネームを入れてください。

$ git clone https://github.com/your/Nextjs-ja-translation-docs
$ cd Nextjs-ja-translation-docs

dependency のインストールをしてください。必ず yarn で行ってください。

$ yarn install

開発サーバーが無事に起動するか確認してください。

$ yarn dev

翻訳作業を行うためのブランチを作成します。ここでは、例として docs/example.md を翻訳するためのブランチを作成します。

$ git checkout -b docs/example

これで、翻訳を始める準備は完了です。エディタを使って、翻訳箇所のファイルを編集します。

また、docs/manifest.json の各セクションのタイトルが設定されています。自分の担当箇所のタイトルを翻訳してください。

getting-started を翻訳する例:

{ "title": "はじめに", "path": "/docs/getting-started.md" },

手順2:翻訳完了からプルリクエスト

precommit 時に翻訳の対象ファイルに対して textlint が走ります。textlint が通らない限り commit できません。エラーを修正する場合は、text-lint:fixを使います。

$ yarn text-lint:fix ./docs/example.md

翻訳箇所をコミットしてプッシュします。コミットはできるだけ 1 つにまとめてください。

$ git add .
$ git commit -m "docs: translate docs/example.md"
$ git push -u origin docs/example.md

最後に、GitHub 上からプルリクエストを作成してください。その後、メンテナーがレビューをして問題がなければマージされます。

Q&A

質問がある場合は、Slackに参加して、#questions チャンネルまでお願いします。

Contributors ✨

Thanks to these wonderful people (emoji key):


Shinobu Hayashi

💻 👀 🔧

かみむら

💻 👀 🌍

hoosan

🌍 📖 👀

Daiki Okumura

🌍

yokinist

📖 🌍 🔧 👀

kurosawa

🌍

Noriaki UCHIYAMA

🌍

ria

🌍

ryuckel

🌍

Okuto Oyama

🌍

syakoo

🌍

thesugar / Ryohei Sato

👀 🌍

Yuji Matsumoto

🌍

Teruhisa Fukumoto

🌍

Takefumi Yoshii

🌍

rikusen0335

🌍

Kentaro Suzuki

🌍

ogugu

🌍

Yuki Takemoto

🌍

Kiichi Tachibana

🌍

ken_o

🌍

Mashu Kushibiki

🌍

Masaki Yoshiiwa

🌍

Kazuki Furukawa

🌍

Atsusuke

🌍

dmamira

🌍

Kyohei Oka

🌍

ともたこ(Tomotaka Ogino)

🌍

Tomo

🌍

ryu-sou

🌍

tanakaKSUK

🌍

adoringonion

🌍

chiiita

🌍

Hiroshi Ito

📖

Keeth Kuwahara

🌍

Hiroki.Ihoriya

🌍

Hirofumi Wakasugi

👀

numb86

🐛

Hiroshi MORISHIGE

🌍

shinya fukimbara

🌍

yodaka

🌍

Kazuhiro-Mimaki

🌍

Piyopanman

🌍

Tetsuya Negishi

🌍

nextjs-ja-translation-docs's People

Contributors

96-38 avatar adoringonion avatar allcontributors[bot] avatar dmamira avatar f-teruhisa avatar himorishige avatar hiro0206 avatar hiro08gh avatar hoosan avatar kakukakug avatar karur4n avatar kazuhiro-mimaki avatar kentaro84207 avatar kenzo-tanaka avatar kuroppe1819 avatar kushibikimashu avatar ogugu9 avatar okmr-d avatar ossan-engineer avatar qlawmarq avatar rikusen0335 avatar shinyaigeek avatar syakoo avatar takefumi-yoshii avatar thesugar avatar tomotaco avatar yamanoku avatar yodakaengineer avatar yokinist avatar youheinozaki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

nextjs-ja-translation-docs's Issues

ソースコードのフォーマットが本家と違う

対象ページ

  • エラーページのカスタマイズ
    他のページも同様になっている可能性はあるが、たまたま「エラーページのカスタマイズ」で発見したため
    一旦、「エラーページのカスタマイズ」のみ記載

差分概要

同じページ内のサンプルコードでも、セミコロンの有無が揺れている。

対応内容

セミコロンありか無しかで統一をお願いしたい。
本家ではセミコロンがないようなので、本家に合わせる形が良いかと思います。

具体例

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/custom-error-page#404-%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

- export default function Custom404() {
-   return <h1>404 - Page Not Found</h1>
- }
+ // pages/404.js
+ export default function Custom404() {
+   return <h1>404 - Page Not Found</h1>;
+ }

デプロイの自動化

What

SSIA

Why

  • 手動でデプロイしており本番環境への反映が属人化しているので

https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs/deployments/activity_log?environment=Production

手動で運用している背景

@Shinyaigeek < これはvercelの組織プランが有料で, かみむらさんと話し合った結果vercelの組織プランで運用することは諦めて, 暫定的に僕のリポジトリにforkしてそれをベースにvercelのフリープランで僕個人として運用してる形式なったんですよね…
https://nextjs-ja.slack.com/archives/C014TEEG8NL/p1611478097003100?thread_ts=1611477909.003000

個人リポジトリは無料だが、organizationに紐付いたリポジトリだと問答無用でお金がかかる https://vercel.com/pricing

How

  • 選択肢1: 何かしらのスキームで課金する
  • 選択肢2: Vercel以外のホスティングサービスに乗り換える
    • Netlify とか検討してみても良さそう( https://www.netlify.com/with/nextjs/)
    • その場合既存のURLから変わるので、設定やリダイレクトなどの対応は別途必要になる

App Router機能の和訳対応

Next.js 13より、従来のPages Routerに変わり、App Router機能を提供した。
それに伴いApp Routerに関する公式ドキュメントが公開されているため、追従して翻訳を行う。

見出しを翻訳するとページ内リンクが壊れる

現在、#で始まる見出しを翻訳すると、その見出しに対してリンクを張れなくなるという問題が発生しています。

例を上げると、このページの冒頭にある

アプリ内の関数コンポーネントの中で router オブジェクト へアクセスしたいときは、 useRouter フックを利用できます。以下の例をご覧ください:

の「router オブジェクト」というリンクを押下すると、同ページ内のこの見出しにジャンプすることが想定されているのですが、実際にはリンクを押下しても動作しません。

原因は、[`router` オブジェクト](#router-オブジェクト) というマークダウンを書くと、HTML 化する際に「オブジェクト」の部分がe382aae38396e382b8e382a7e382afe38388にエンコードされてしまうからです。
そのため、このリンクのhref#router-e392aae38396e382b8e382a7e382afe38388になり、そのような要素は存在せず、ジャンプが発生しないという状況になってしまっています。

この問題は日本語を含んでいる全ての見出しで発生することであり、何らかの対応が必要だと思います。

私が思い付く対策は、以下の 2 種類です。

  1. aタグを使ってリンクを書く
  2. Heading IDs を使う

aタグを使ってリンクを書く

[`router` オブジェクト](#router-オブジェクト)の代わりに<a href="#router-オブジェクト">`router` オブジェクト</a>のように書くことで、先程のエンコードの問題を回避できます。

Heading IDs を使う

Heading IDsはマークダウンの拡張構文で、

### router オブジェクト {#router-object}

というマークダウンが、

<h3 id="router-object">router オブジェクト</h3>

という HTML に変換されます。

この構文を利用することで、アンカー名を英語のままにすることができるので、aタグを使わなくてもこの見出しにリンクを張ることができます。

現状ではこの構文はサポートされていませんが、ローカル環境で試したところ、以下のプラグインを使うことで導入できました。
imcuttle/remark-heading-id: The remark plugin for supporting custom heading id

どちらを使うべきか

Heading IDs が望ましいと考えています。

マークダウンファイルのなかにaタグを書くのが不格好で煩雑、というのもあるのですが、見出しからアンカー名を自動生成していること自体が望ましくないと考えています。

今の仕組みだと、見出しを翻訳する度にアンカー名が変わってしまうため、そこに対するリンクも修正する必要があります。これは手間ですし、見落とす可能性が十分にあります。
現に、このページにも「router オブジェクト」へのリンクがあるのですが、翻訳に合わせた対応は行われておらず、#router-objectへのリンクになっています。このようなアンカーは存在しないので当然、ワークしていません。
Heading IDs を使ってアンカー名を原文と同じにするようにすれば、[`router` オブジェクト](#router-object)[`router` オブジェクト](#router-オブジェクト)を書き換えるような作業は発生しません。

また、アンカー名は URL の一部なので、日本語を含めるべきではないと思います。
オリジン以降のパスは、本家と翻訳ドキュメントとで一致しているのが分かりやすくて望ましいと思いますが、アンカー名が翻訳されてしまうと、その関係が崩れてしまいます。
このような観点からも、Heading IDs を導入して「見出しのテキスト」と「アンカー名」を切り離すべきだと考えます。

もちろん、より望ましい解決策、よりシンプルな解決策があれば、それに越したことはないのですが。

翻訳の概要と進捗状況

翻訳プロジェクトに参加するために

ドキュメントの翻訳は以下の手順で進めてください。

  1. 翻訳ページ一覧を確認して、翻訳したい箇所をコメントしてください。 翻訳する箇所はdocs/getting-started.mdのように指定してください。また、 翻訳箇所は1ページずつでお願いします。

  2. 翻訳はREADME.mdに従って進めてください。翻訳する前に、必ずスタイルガイドに目を通してください。

  3. 校正や確認が終わったらプルリクエストを出してください。各メンテナーが確認して、問題がなければマージされます。

もし、わからないことや質問等がある場合はSlackの#questionsチャンネルで質問してください。

メンテナーへ

コメントの確認からプルリクエストをマージする手順は以下に沿ってください。

コメントを確認した場合

翻訳箇所のコメントを確認した場合、以下のフォーマットに沿って書き換えてください。作業中がわかるように:rocket:の絵文字をつけてください。

こちらは一例です。

- [ ] docs/getting-started.md(@hiro08gh):rocket:

プルリクエストを確認した場合

プルリクエストを確認した場合、以下のフォーマットに書き換えてください。#にはプルリクエストを指定してください。

- [ ] docs/getting-started.md(@hiro08gh):rocket: #10

翻訳のレビューが終わった場合

翻訳のチェックが終わってプルリクエストがマージされたら、以下のフォーマットに書き換えてください。翻訳完了がわかるように:tada:の絵文字をつけてください。

- [x] docs/getting-started.md(@hiro08gh):tada:

注意

こちらのdocs.mdxは古いドキュメントになります。なので、間違えて翻訳しないように注意してください。
https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs/blob/master/components/docs/docs.mdx

翻訳ページ一覧(79項目)

Getting Started

Basic Features

  • docs/basic-features/pages.md(@hoosan):tada:
  • docs/basic-features/data-fetching.md(@ossan-engineer):tada:
  • docs/basic-features/built-in-css-support.md(@ogugu9):tada:
  • docs/basic-features/built-in-css-support.md 2/20 の差分追従で更新の必要あり
  • docs/basic-features/image-optimization.md(@kenzoukenzou):rocket:
  • docs/basic-features/image-optimization.md 3/11 の差分追従で更新の必要あり
  • docs/basic-features/fast-refresh.md(@kenzoukenzou):rocket:
  • docs/basic-features/eslint.md
  • docs/basic-features/font-optimization.md
  • docs/basic-features/layouts.md
  • docs/basic-features/script.md
  • docs/basic-features/static-file-serving.md(@hiro08gh):tada:
  • docs/basic-features/typescript.md(@ria3100):tada:
  • docs/basic-features/environment-variables.md(@okmr-d):tada:
  • docs/basic-features/environment-variables.md 3/11の更新で差分追従の必要あり
  • docs/basic-features/supported-browsers-features.md(@ia17011):tada:
  • docs/basic-features/data-fetching/client-side.md
  • docs/basic-features/data-fetching/get-static-paths.md
  • docs/basic-features/data-fetching/get-static-props.md
  • docs/basic-features/data-fetching/get-server-side-props.md
  • docs/basic-features/data-fetching/overview.md

Routing

  • docs/routing/introduction.md(@karur4n):tada: 2/22の更新で差分追従の必要あり
  • docs/routing/dynamic-routes.md(@yokinist):tada: 2/20の更新で差分追従の必要あり
  • docs/routing/imperatively.md(@ryuckel):tada:
  • docs/routing/shallow-routing.md(@tanakaKSUK):tada:

API Routes

  • docs/api-routes/introduction.md(@syakoo):tada:
  • docs/api-routes/dynamic-api-routes.md(@okmr-d):tada:
  • docs/api-routes/api-middlewares.md(@yokinist):tada:
  • docs/api-routes/api-middlewares.md 2/19の更新で差分追従の必要あり
  • docs/api-routes/response-helpers.md(@96-38):tada:
  • docs/api-routes/response-helpers.md 2/20 の更新で差分追従の必要あり

Middleware

  • docs/middleware.md

Going to Production

  • docs/going-to-production.md

development

  • docs/deployment.md(@yopinoji):tada: 3/12 の更新で差分追従の必要あり

Authentication

Guides

  • docs/guides/building-forms.md

Advanced Features

  • docs/advanced-features/preview-mode.md(@YouheiNozaki):tada:
  • docs/advanced-features/dynamic-import.md(@yamanoku):tada:
  • docs/advanced-features/dynamic-import.md (更新分の差分追従の必要あり 2022/2/11)
  • docs/advanced-features/automatic-static-optimization.md(@hoosan):tada:
  • docs/advanced-features/static-html-export.md(@yamanoku):tada:
  • docs/advanced-features/static-html-export.md (更新分の差分追従の必要あり 2022/2/13)
  • docs/advanced-features/module-path-aliases.md(@noriaki):tada:
  • docs/advanced-features/customizing-babel-config.md(@hiro08gh):tada:
  • docs/advanced-features/customizing-postcss-config.md(@yamanoku):tada:
  • docs/advanced-features/custom-server.md(@takefumi-yoshii):tada:
  • docs/advanced-features/custom-app.md(@mottox2):tada:
  • docs/advanced-features/custom-document.md(@takefumi-yoshii):tada:
  • docs/advanced-features/custom-error-page.md(@syakoo):tada:
  • docs/advanced-features/src-directory.md(@96-38):tada:
  • docs/advanced-features/multi-zones.md(@queq1890):tada:
  • docs/advanced-features/measuring-performance.md(@kakukakug):tada: (更新分の差分追従の必要あり 2022/2/13)
  • docs/advanced-features/debugging.md(@Piyopanman) 🚀
  • docs/advanced-features/codemods.md
  • docs/advanced-features/source-maps.md
  • docs/advanced-features/i18n-routing.md(@kei178):tada:
  • docs/advanced-features/i18n-routing.md (2022/2/13 更新に伴い差分翻訳の必要あり)
  • docs/advanced-features/compiler.md
  • docs/advanced-features/output-file-tracing.md
  • docs/advanced-features/react-18.md
  • docs/advanced-features/security-headers.md
  • docs/advanced-features/using-mdx.md

Advanced Features(AMP Support)

  • docs/advanced-features/amp-support/introduction.md(@96-38):tada:
  • docs/advanced-features/amp-support/adding-amp-components.md(@96-38):tada:
  • docs/advanced-features/amp-support/amp-validation.md(@96-38):tada:
  • docs/advanced-features/amp-support/amp-in-static-html-export.md(@96-38 ):tada:
  • docs/advanced-features/amp-support/typescript.md(@96-38 ):tada: (2022/3/12 更新に伴い差分翻訳の必要あり)

Migrating to Next.js

  • docs/migrating/incremental-adoption.md
  • docs/migrating/from-gatsby.md
  • docs/migrating/from-create-react-app.md
  • docs/migrating/from-react-router

Upgrade Guide

FAQ

  • docs/faq.md(@adoringonion):tada: 3/12 の更新で差分追従の必要あり

API Reference

  • docs/api-reference/cli.md(@f-teruhisa):tada:
  • docs/api-reference/create-next-app.md
  • docs/api-reference/next/router.md(@okakyo):tada:
  • docs/api-reference/next/router.md 2/19 の更新で差分追従の必要あり
  • docs/api-reference/next/link.md(@yamanoku):tada:
  • docs/api-reference/next/head.md(@kentaro84207):tada:
  • docs/api-reference/next/script.md
  • docs/api-reference/next/server.md
  • docs/api-reference/next/amp.md(@kentaro84207 ):tada:
  • docs/api-reference/next/image.md(@Kazuhiro-Mimaki):rocket:
  • docs/api-reference/data-fetching/get-initial-props.md(@tomohiroyoshida):tada:
  • docs/api-reference/data-fetching/get-server-side-props.md
  • docs/api-reference/data-fetching/get-static-paths.md
  • docs/api-reference/data-fetching/get-static-props.md
  • docs/api-reference/data-fetching/incremental-static-regeneration.md
  • docs/api-reference/edge-runtime.md

next.config.js

  • docs/api-reference/next.config.js/introduction.md(@resqnet):tada:
  • docs/api-reference/next.config.js/environment-variables.md(@rikusen0335):tada:
  • docs/api-reference/next.config.js/basepath.md(@hiro08gh ):rocket:
  • docs/api-reference/next.config.js/rewrites.md
  • docs/api-reference/next.config.js/redirects.md
  • docs/api-reference/next.config.js/headers.md(@f-teruhisa):tada:
  • docs/api-reference/next.config.js/headers.md (2022/2/15日更新分の追従)
  • docs/api-reference/next.config.js/custom-page-extensions.md(@rikusen0335):tada:
  • docs/api-reference/next.config.js/custom-page-extensions.md (2022/2/14日更新分の追従)
  • docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md(@f-teruhisa):tada:
  • docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md (2022/2/14日更新分の追従)
  • docs/api-reference/next.config.js/build-target.md(@dmamira):tada: ( #186 にて本家に追従し削除 )
  • docs/api-reference/next.config.js/custom-webpack-config.md(@kkeeth):tada:
  • docs/api-reference/next.config.js/compression.md(@hiro08gh):tada:
  • docs/api-reference/next.config.js/static-optimization-indicator.md(@Hiro0206):tada:
  • docs/api-reference/next.config.js/runtime-configuration.md(@KushibikiMashu):tada:
  • docs/api-reference/next.config.js/disabling-x-powered-by.md(@ogugu9):tada:
  • docs/api-reference/next.config.js/disabling-etag-generation.md(@96-38):tada:
  • docs/api-reference/next.config.js/disabling-http-keep-alive.md
  • docs/api-reference/next.config.js/setting-a-custom-build-directory.md(@96-38):tada:
  • docs/api-reference/next.config.js/configuring-the-build-id.md(@ogugu9):tada:
  • docs/api-reference/next.config.js/configuring-onDemandEntries.md(@thesugar):tada:
  • docs/api-reference/next.config.js/ignoring-eslint
  • docs/api-reference/next.config.js/ignoring-typescript-errors.md(@kuroppe1819):tada:
  • docs/api-reference/next.config.js/exportPathMap.md(@kuroppe1819):tada:
  • docs/api-reference/next.config.js/trailing-slash.md(@f-teruhisa):tada:
  • docs/api-reference/next.config.js/react-strict-mode.md(@f-teruhisa):tada:
  • docs/api-reference/next.config.js/build-indicator.md(@himorishige ):tada:

旧サイトのクローズ

移行前の旧サイトがまだ生存していて検索上位に表示されているため、クロージングの対応したいと思います。
(もっと早くやるべきでしたね、すみません 🙏 )

やること

Next.js ドキュメント本家への追従

ずっと放置してしまっていて追従できていなかった. maintainer meetingで, とりあえず全てのドキュメントを少しずつ見ていって, 追従することになった. 担当したい場合は, 被らないようにissueで報告してください.

  • 確認中の時は 🏃‍♂️
  • チェック済みの時は ✅

変更があったときは, 差分をPRで投げてください

README.mdの作成

記載項目

  • イントロダクション
  • 翻訳の手順
  • 参考リンク
  • メンテナー
  • コントリビューター

翻訳済ドキュメントの更新についての方針を決める

問題意識

翻訳済のドキュメントの更新できておらず、ソースとしての信頼性が低くなってしまっている

  • 本家のドキュメントがどんどん更新されていくが追従できていないため
  • 翻訳タイミングによってバージョンが異なっているため一貫性にかけているため
  • 翻訳されたドキュメントがどのバージョンなのかが不明なため

備考

本家ドキュメントへの追従方針(仮)

- 本家で新規作成されたファイルは追加する
- 未翻訳のファイルが本家で更新されていたら更新する
- 翻訳の有無関わらず本家で削除されたファイルは削除する
- // #TODO: 翻訳済ファイルの追従方針を決める

考えられそうな方策(随時更新)

  • 英文 / 日本文の混在を許容し、大きなアップデートのタイミングで差分をチェックし変更分は英文で上書きする
    • ※ 翻訳対象となっていたバージョンの英語ドキュメントがないと差分が分かりづらい
    • ※ チェック量が多くてしんどそう・・

あまり知見ないので、もし何かいいアイデアあればコメントにて意見いただけると嬉しいです!

関連: #186 (comment)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.