仕事で、4月からNext.jsを使用するプロジェクトに参画しました。
それにあわせて、自宅でNext.jsの勉強もはじめました。
Next.jsとは
Next.jsはReactをベースにしたフロントエンドフレームワークです。
私は、React自体、全く使用したことなく、SPAではAngular使いで、他の案件では今も使用しています。
主な機能として、以下の機能があります。
通常のSPAとしての大きな違いは「レンダリング」「データ取得」のサーバサイド側の機能も合わせて作れるところが大きな特徴かなと思っています。
| 機能 | 説明 |
|---|---|
| ルーティング | サーバーコンポーネント上に構築されたファイルシステムベースのルーター。レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートします。 |
| レンダリング | クライアントコンポーネントとサーバーコンポーネントによるクライアントサイドとサーバーサイドのレンダリング。Next.jsによるサーバー上の静的および動的レンダリングでさらに最適化。Edge and Node.jsランタイムでのストリーミング。 |
| データ取得 | サーバーコンポーネントでのasync/awaitを使用したデータ取得の簡素化、リクエストのメモ化、データキャッシュ、再検証のための拡張fetch API。 |
| スタイリング | CSS Modules、Tailwind CSS、CSS-in-JSなど、好みのスタイリング方法をサポート。 |
| 最適化 | アプリケーションのCore Web VitalsとユーザーエクスペリエンスW向上のための、画像、フォント、スクリプトの最適化。 |
| TypeScript | より優れた型チェックと効率的なコンパイル、カスタムTypeScriptプラグインと型チェッカーを含む、TypeScriptのサポート改善。 |
出典: https://nextjsjp.org/docs#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD
デプロイ方法
ドキュメントにデプロイ方法で以下の4つが紹介されています。
| デプロイオプション | 機能サポート |
|---|---|
| Node.jsサーバー | すべて |
| Dockerコンテナ | すべて |
| 静的エクスポート | 限定的 |
| アダプター | プラットフォーム固有 |
出典: https://nextjsjp.org/docs/app/getting-started/deploying
Docker用のテンプレートが用意されていますが、Page Router方式であり、App Routerで使用できなかったので、Dockerfileをカスタマイズして使用することにしました。
Dockerfileの変更
主な変更点は、Next.js 15のプロジェクトをベースに、App Routerでnpmを使用した形にしました。
# syntax=docker.io/docker/dockerfile:1
FROM node:18-alpine AS base
# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
# Install dependencies based on the preferred package manager
COPY package.json package-lock.json* .npmrc* ./
RUN npm ci
# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED=1
RUN npm run build
# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
# COPY --from=builder /app/public ./public
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
# cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
# COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static/
USER nextjs
EXPOSE 3000
ENV PORT=3000
# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]今後の対応
ローカルでDockerが動作することが確認出来たので、
さくらインターネットのレンタルサーバ上に、Nginx + Let’s Encrypt + Next.jsの環境を構築したいと思います。
その後は、これをプラットフォームに
- PostgreSQLとかDBも利用
- 簡単なWebツールの開発
をしていきたいと思います。
