概要

皆さまは Web アプリや Web サイトを作成する際は何の言語のどういったフレームワークを使用していますでしょうか？

私はもっぱらプログラミング言語としては JavaScript/TypeScript を使用しており、フレームワークとしては React.js/Next.js を採用して開発などを進めています。

React.js や Next.js といったフレームワークは非常に強力で Web アプリを簡単に作ることができる一方、できることが多くて毎日勉強の日々です。

そんな中、Node.js の JavaScript 公式 Web サイトのソースコードが GitHub 上に上がっており、しかも Next.js で作成されているということがわかりましたので、今回はそのリポジトリについて簡単にご紹介したいと思います。

今回ご紹介する OSS は、Node.js JavaScript 公式 Web サイトのソースコードを読んで Next.js をさらに理解できるかもしれない「nodejs.org」になります。

Next.js を普段から利用している方にとっては、とてもよいサンプルになるのではないでしょうか？

それでは早速詳細についてみていきましょう！

特徴

「nodejs.org」ページの特徴としては、以下の点が挙げられます。

利用方法としては、公式サイトに直接アクセスすることで Next.js で作成された Web ページを参照することが可能です。

ただ、今回はソースコードを把握することが一番の目的であるため、ローカル環境にクローンして実際に動かしてみる以下の方法をお勧めします。

git clone https://github.com/nodejs/nodejs.org.git
cd nodejs.org
npm ci
npx turbo serve

ローカルサーバーが起動した後は http://localhost:3000/ にアクセスすることで Web ページを参照することが可能です。

早速私自身も「nodejs.org」を自分の環境下にクローンしてみてソースコードを見てみました。

ソースコードは Next.js で書かれているということなので、Next.js に知見のある方にとってはなじみの深いディレクトリ構成になっていると思います。

package.json を見るとあたりまえですが lint や prettier、storybook、jest などもきちんと定義されているため、さすが Node.js 公式サイトの Web ページだなと改めて思いました。

こちらのソースコードを眺めるだけでも Next.js や TypeScript を使用したプロジェクトの構築について非常に学ぶことが多いため、とても勉強になりますね。

今回は、Node.js JavaScript 公式 Web サイトのソースコードを読んで Next.js をさらに理解を深めるのにとても勉強になる「nodejs.org」についてご紹介しました。

Next.js を触って知見のある方にとってはとても勉強になるリポジトリではないでしょうか？

自分自身もこちらのリポジトリを見ながら、再度 Next.js の機能の再確認やディレクトリ構成、ソースコードの記述の仕方などを勉強していきたいと思いました！

こちらのリポジトリを眺めるだけでも非常に勉強になると思いますので、Next.js を勉強中の方などはぜひ一度こちらの「nodejs.org」を見てみてはいかがでしょうか？