Next.jsとReactでのWEB開発者必見！特に役立つNext.jsの技術をまとめてみた。

記事

IT・テクノロジー

高速なレンダリングやその更新の速さからUI向けに設計されたReactとNext.js。

大規模な開発案件はもちろん、アプリ、ホームページ、LPでもこれから紹介するこれらの技術は皆さんの役にたてる可能性がありますので順に紹介していきます。

✅ 1. next/image で高速かつ最適な画像表示

用途: 背景画像・サムネイル・テクスチャ画像など

メリット

自動で最適サイズに圧縮

WebPにも対応

ローディングの遅延表示も可能

import Image from 'next/image'

✅ 2. Dynamic ImportでThree.jsの描画を遅延ロード

用途: 重たいGLBモデルや3Dコンポーネントを後で表示したいとき

メリット: 初期表示が速くなる

import dynamic from 'next/dynamic'

const ModelViewer = dynamic(() => import('../components/ModelViewer'), { ssr: false })

✅ 3. API Routes でサーバー処理も一体に

用途: 例えばGLBモデルをアップロードしてサーバーで保存、など

実装例: /pages/api/upload.ts

export default function handler(req, res) {

if (req.method === 'POST') {

// req.body で受信、保存処理

res.status(200).json({ message: 'アップロード完了' })

}

✅ 4. next/head でSEOやOGP設定を追加

用途: ポートフォリオやNFT紹介ページでSNS表示を整える

import Head from 'next/head'

<Head>

</Head>

✅ 5. next-export-optimize-images で静的出力対応＋画像最適化

Three.js系のページでも画像サイズが大きくなりがちですが、このプラグインで画像も高速化。

✅ 6. App Router（Next.js 13以降）でレイアウトの再利用

用途: ページ切り替え時も3D空間を維持したいときなど

app/layout.tsx を使うことで3DのCanvasを共通にできます。