はじめに
Reactのフレームワークはいくつかありますが、その中で最も利用されているのがNext.jsです。今回はNext.jsについて基礎から振り返り、理解を深めようと思います。
Next.jsとはどんなフレームワーク?
2016年頃にVercel(旧Zeit)によって公開された、ReactをベースにしたフルスタックのWebアプリケーションフレームワークです。サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)といった機能に対応し、高速でSEOにも強いWebアプリケーションを構築することができます。
-
サーバーサイドレンダリング(SSR)
ユーザーのリクエスト時にサーバー上でHTMLを動的に生成し、ブラウザ側に返す手法です。これにより、初期表示が速くなりSEOを向上させることができます。 -
静的サイト生成(SSG)
ビルド時に全てのHTMLを生成して、コンテンツデリバリーネットワーク(CDN)を活用して配信する方法です。既に生成された静的なページが返されるため、サーバーの処理が不要で高速にレンダリングされます。
ルーティング
Next.jsには大きく分けて2つのルーティング方法があります。
1. Page Router
Next.jsの初期バージョンから存在するルーティング方法です。pages/
ディレクトリ内にファイルを置くことで自動的にルートが生成されます。
pages/
├── index.tsx トップページ(/)
├── about.tsx /about
├── blog/
│ └── [id].tsx /blog/[id]
2. App Router
Next.js 13から導入されたルーティング方法で、Page Routerと比べて柔軟で高度なルーティングができます。app/
ディレクトリを使ってページ・レイアウトなどが構成されます。
app/
├── layout.tsx 全体レイアウト
├── page.tsx トップページ(/)
├── about/
│ ├── page.tsx /about
└── layout.tsx /about専用レイアウト
Hello World!する
Node.jsのダウンロードやnpxのインストールを行った上で、下記のコードで新しいNext.jsのアプリを作成します。
npx create-next-app@latest hello-next
設定を終えた後、開発サーバーを起動すれば、Next.jsの初期画面が表示されます。
cd hello-next
npm run dev
まとめ
Next.jsについて振り返りましたが、Page RouterとApp Routerについて忘れていた部分があったので振り返って学習して良かったです。
Next.jsは現在主流のReactフレームワークの一つなので、また基礎部分のインプット、アウトプットをしていきたいです。
参考資料
Next.js by Vercel - The React Framework
採用拡大中!
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニアを募集しています!
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう!
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/