2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

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/

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?