コンテンツにスキップ
ブログに戻る

2020年1月9日(木)

新しいNext.jsドキュメント

投稿者

新しいNext.jsドキュメントを発表できることを嬉しく思います。

  • 改善されたコンテンツ: コアコンセプトと機能について説明する新しいセクションが追加されました。
  • 検索: 新しいサイドバーを使用してドキュメントをファジー検索できます。
  • APIリファレンス 最も要望の多かったドキュメント追加機能の1つです。Next.jsドキュメントに個別のAPIリファレンスが追加されました。
  • Next.js GitHubリポジトリの一部: ドキュメントコンテンツは引き続きNext.jsリポジリト内にあります。これにより、ドキュメントの更新が新機能と同期されます。

新しく改善されたドキュメントに加え、nextjs.org/learnにもいくつかの変更を加え、Next.jsをより簡単に始めることができるようになりました。

  • ログインは不要になりました: GitHubでのログインを廃止したため、すぐに学習を開始できます。引き続きポイントを獲得できます!
  • 新しいAPI Routesレッスン: Next.jsでAPIエンドポイントを作成する基本と、SWRでそれをフェッチする方法を説明する新しいレッスンが追加されました。

改善されたコンテンツ

以前は、Next.jsドキュメントは単一のreadme.mdファイルに存在していました。過去3年間で、ドキュメントは一貫して改善され、フレームワークのすべての領域をカバーするように規模が拡大しました。

時間の経過とともにドキュメントページは非常に長くなり、独立して参照・検索できるようにドキュメントをより小さな単位に分割することが望ましいというコミュニティからのフィードバックを受けるようになりました。

これまでのすべてのリリースと同様に、最適なページ構造を見つけるためにコミュニティメンバーと緊密に協力しました。

各セクションが別々の概念を説明するマルチページ構造を採用することにしました。これにより、ユーザーは関連するコンテンツをより迅速に見つけることができます。

サイドバーも更新され、すべての機能を表示したり、高度な機能と基本的な機能を組み合わせたりするのではなく、コア機能と概念に焦点を当ててコンテンツがより適切にソートされるようになりました。

構造の改善に加えて、いくつかの新しいセクションがドキュメントに追加されました。特に注目すべきは次のとおりです。

Getting Started documentation page
はじめにドキュメントページ

マルチページドキュメントへの移行に伴い、単一のドキュメントページの重要な利点であるcmd + f(Windows/Linuxではctrl + f)による検索機能が失われます。

すべてのドキュメントページをファジー検索できる新しい検索入力がドキュメントのサイドバーに追加されました。

これにより、ドキュメントが単一のページであるかのように感じられます。

Search for TypeScript in the documentation.
ドキュメントでTypeScriptを検索してください。

APIリファレンス

サイドバーに専用のAPIリファレンスセクションが追加されました。このドキュメントへの追加は、Next.jsを頻繁に使用し、どのパラメータを渡すべきか、どの関数を呼び出すべきかを調べたい企業やコミュニティメンバーから頻繁に要望されていました。

以前は、これらのリファレンスは機能の説明と混在していました。

Documentation in the API Reference
APIリファレンスのドキュメント

Next.js GitHubリポジトリの一部

プロジェクトの開始以来、Next.jsドキュメントの唯一の場所は、GitHubリポジトリ内のreadme.mdファイルでした。

nextjs.orgウェブサイトが立ち上がった際、Next.jsのGitHubリポジトリからウェブサイトのGitHubリポジトリへ定期的にコンテンツをコピーすることで、ドキュメントの変更を手動で最新の状態に保っていました。これをしなければならなかった理由は、ウェブサイトのページがMDXによって動いていたためです。

手動でのコピーは理想的ではなく、より良い解決策を検討し始めました。新しいドキュメントへの貢献方法を、ウェブサイトの動作に関する知識なしにNext.js GitHubリポジトリ内のマークダウンファイルを更新する現在の方法と同じくらい低摩擦にしたいと考えました。

Next.jsのページごとの静的生成の新しいサポート(提案)を使用することで、ドキュメントをNext.jsリポジトリ内に保持することができました。

生のGitHubファイルURLからのマークダウンはgetStaticPropsでフェッチされ、HTMLにレンダリングされます。これにより、MDXが不要になったため、ブラウザに送信されるJavaScriptが少なくなります。

また、個々のドキュメントページへの貢献をより簡単にしたかったのです。これを実現するために、すべてのドキュメントページの下部に「GitHubでこのページを編集」リンクを追加しました。

Documentation page with link to the markdown file on GitHub.
GitHub上のマークダウンファイルへのリンクがあるドキュメントページ。

ドキュメントが更新されると、新しい安定版リリースのたびに自動的にリリースされます。これにより、ドキュメントは常に新しいリリースと同期されます。

nextjs.org/learnの改善点

The nextjs.org/learnウェブサイトは、Next.jsがデフォルトで提供する多くの機能について案内するインタラクティブな学習体験です。

完了したすべてのレッスンでポイントが授与されます。レッスンによっては、学習内容を定着させるためのクイズが含まれることもあります。

この進捗状況と獲得したポイントを記録するために、以前はGitHubアカウントでのログインをユーザーに求めていました。

最近、この制限を解除し、すべてのレッスンがログインなしで利用できるようになりました。これにより、nextjs.org/learnでNext.jsの学習をすぐに開始できます。

新しいAPI routesレッスン

Next.jsでAPIエンドポイントを作成する基本と、SWRを使用してそれをフェッチする方法を説明する新しいレッスンが追加されました。

API Routes lesson in nextjs.org/learn.
nextjs.org/learnのAPI Routesレッスン。

この新しいレッスンに貢献してくれたNext.jsコミュニティメンバーのAmandeep Singhに特別な感謝を申し上げます。

今後

ユーザーからのフィードバックに基づいて、ドキュメントの改善と反復を続けていきます。Next.jsが提供する高レベルおよび低レベルの概念に関する新しいセクションが追加される予定です。

新しいドキュメントに関するフィードバックがある場合は、nextjs.org/docsの各ページ下部にあるフィードバック入力欄をご利用ください。

ドキュメントへのコミュニティからの貢献を歓迎します。始めるのに良い場所は、GitHubの「Good first issue」ラベルです。