Next.jsを簡単にAndroid化

前書き

Next.jsで作成したウェブアプリを、オフライン環境で利用したり、Androidアプリとして公開したいと思ったことはありませんか？筆者も同じ経験があります。
この記事では、「サクッと始めたい」方々向けに、簡潔で分かりやすい手順を解説します。細かい技術的な詳細については、必要に応じて調べてください。

本編

用意するもの

以下の環境がない人は事前に準備してください

• Next.js プロジェクト
  筆者はデフォルトでやっています
• Android studio
  必要なライブラリなどは準備のセクションで書きます

インストール

capacitor(以降この記事ではcapと略します)をインストールします
capはNext.jsやvue.jsなどをAndroidやiOSアプリ化できます
iOSアプリ化にはMacが必要です

cmd

npm i @capacitor/core
npm i -D @capacitor/cli

capを初期化します

cmd

npx cap init

NameはAndroidアプリの名前になります
Package IDは[トップレベルドメイン].[会社名].[アプリ名]で決めます
トップレベルドメインは○○○.comみたいなcomの部分です
capacitor.config.tsファイルで設定内容は閲覧できます
その際、ついでに一行変更します

capacitor.config.ts

import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "com.example.app",
  appName: "test-android",
  webDir: "out", // publicからoutにする
};

export default config;

next.config.tsにoutput設定をします

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export", // これを追加
};

export default nextConfig;

その次にビルドします

cmd

npm run build

反映させます

cmd

npx cap sync

アプリ化するプラットフォームを選びます
今回はAndroidのみなのでandroidをインストールします

cmd

npm install @capacitor/android
npx cap add android

Android Studioを起動させ、ビルドします

cmd

npx cap open android

ここまで行ったら普段通りbuildするだけで十分です
https://yowayowa-engineer.com/run-device-apk/
さんの記事でできると思います

最終的にはこんな感じになってます

終わり

終わり！