Next.jsって結局何？？
はじめに
初めまして、プログラミング勉強中のチョコ柿です。
今回はChatGPT4に翻訳を手伝ってもらいつつ、Next.jsの公式Docの冒頭を読んでみました。
一度開発は行ったのですが、結局Next.jsって何がいいの？どういうものなの？という状況だったので、ざっくり理解したいなと思い書いてみます。
今回読むのはNext.js14のものなので、予めご了承ください。
Next.jsとは
Next.jsとはReactのフレームワークでフルスタックなWebアプリケーションを構築することができます。Reactを使ってUIを構築して追加の機能や最適化のためにNext.jsを利用するという流れです。
Next.jsではReactに必要なバンドリングやコンパイリングなどを自動的に設定してくれます。
主な機能
1.ルーティング
そもそもルーティングとは、ユーザーのリクエストに対して適切なコンテンツ（ページなど）や処理にマッピングさせることです。
Next.jsではこの機能に大きな特徴を持っています。
一旦公式Docを翻訳した文章を記載すると以下のようになります。
ルーティング：サーバーコンポーネント上に構築されたファイルシステムベースのルーターで、レイアウト、ネストされたルーティング、ローディング状態、エラー処理などをサポート。
はい、意味不明ですね。
１つ１つみてみます。
・サーバーコンポーネント：ブラウザなどのクライアント側からのリクエストに応答して動作するサーバー上のソフトウェアのこと
・ファイルシステムベース：開発時などに設定するファイルの配置が直接URLに関係してくる。例えば、pagesというフォルダにアクセスする場合は、pagesがURLに反映されるというもの。
難しい単語は上記の通りです。サーバー側で動作するすごいルーティングシステムなんだなって感じですね。
２.レンダリング
またしても一旦公式Docを翻訳した文章を記載します。
クライアントサイドとサーバーサイドのレンダリングを、クライアントとサーバーコンポーネントで実現。EdgeおよびNode.jsランタイムでのストリーミングを含む、サーバー上での静的および動的レンダリングでさらに最適化。
Edgeとは直訳すると「端」という意味です。
これは名前の通り、データ処理をインターネットの「端」、つまりユーザーに物理的に近い距離で処理を行うことでデータが移動する距離を短縮し処理速度を早めることができる技術だそうです。
Node.jsランタイムはサーバーサイドでJavascriptを実行するための環境です。
3.データフェッチ
サーバーコンポーネント上でasyncやawaitなどの非同期処理を用いたデータ取得やリクエストの記憶、データキャッシング、などが可能
4.スタイリング
CSS、TailwindCSS、CSS-in-Jsなどのさまざまなスタイリング方法をサポート
5.最適化
アプリケーションに重要なコアウェブバイタルやUXを向上させるための画像、フォント、スクリプトの最適化を行ってくれます。
6.Typescript
Typescriptもサポートしてます。
まとめ
超絶ざっくり読んでみて、なんとなーーくどんなものかは掴めました。
実際に使ってみるとApprouterの利便性を身をもって感じられるので、興味ある方は使ってみてください。
Discussion