Next.jsでつくったアプリをnetlifyへデプロイする

記事概要

Next.jsの公式チュートリアルをもとに、知人とアプリを作成しています
それをネット上にリリースしたいなぁと思ったところ、netlifyならお手軽にできそうだということで試してみました
その時の作業メモです
（本当はVercel使いたかった...でもGithub organizationとの連携だと有料なんですよね...)

環境情報

・next.js 14.2.5
・以下コマンドでプロジェクトを作成済み

npx create-next-app@latest {プロジェクト名} --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" 

※公式チュートリアルは未完了

デプロイ手順

1 ) netlifyにログイン

2 ) Add new Site > Import an Existing Project

3 ) インポート元を選択（自分はGithubリポジトリからインポートするので、Github選択）

4 ) インポートしたいリポジトリを選択

5 ) デプロイ設定を行い、deploy押下

項目名	説明
SiteName	サイト名、リリースした際のURLになる
Branch to deploy	デプロイしたいブランチ
Base directory	プロジェクトルート、.nextやappディレクトリの一つ上のディレクトリ名
Build command	"npm run build" ※1
Publish directory	"{プロジェクトルート}/.next"
Function directory	自動挿入される値をそのまま

デプロイ成功時の自分のアプリのデプロイ設定はこのようになっている
(Site configuration > Build Settings)

※1 事前にローカルでnpm run buildが成功するか確認しておくこと
公式チュートリアルのプロジェクト生成コマンドを流用している場合、以下の通りコンパイルで怒られることがある

 Linting and checking validity of types  ..Failed to compile.

./app/ui/acme-logo.tsx:2:26
Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations.

  1 | import { GlobeAltIcon } from '@heroicons/react/24/outline';
> 2 | import { lusitana } from '@/app/ui/fonts';
    |                          ^
  3 |
  4 | export default function AcmeLogo() {
  5 |   return (

これはfont.tsファイルが不足していることが原因（本当はチュートリアル内で追加するもの）
なので以下にファイルを追加してあげる

{プロジェクトルート}\app\ui\fonts.ts

font.ts

import { Inter,Lusitana } from 'next/font/google';

 
export const inter = Inter({ subsets: ['latin'] });

export const lusitana = Lusitana({
    weight: ['400', '700'],
    subsets: ['latin'],
  })

環境変数の設定

サイトで利用するシークレットキーなどはリポジトリに上げてしまうのは抵抗があると思います。
なので、そういった機密情報はNetlifyに直接登録します。

１）Site Configuration > Environment Variables > Add a variable

一つ一つの値を打ち込んで登録する場合は"Add a single variable"
すでにあるenvファイルなどの内容をまとめて登録するには"Import from .env file"を押下し、登録できます