概要
皆さまは 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」ページの特徴としては、以下の点が挙げられます。
- TypeScript を採用した Web ページ
- SCSS/TailwindCSS を採用したデザイン
- MDXv2 を採用
- Next.js を使用して Web ページを構築
利用手順
利用方法としては、公式サイトに直接アクセスすることで 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」を見てみてはいかがでしょうか？
