[PAW] (17) APK파일 생성 도전 그리고 보류

➡️Next.js -> Android(with Capacitor)

• 20버전 이상이어야 작동함

• APK 파일로 만들수 있는지 자료 조사 및 시도

• 아직 성공을 못해서 내일 이어서 할 계획

(=> 일단보류
왜냐하면, PWA 로 만든 본질적인 이유가 native app으로 개발하지 않아도 앱을 사용할 수 있음 인데,
APK 파일로 만들어서 사용하는 것이 맞는지에 대한 의문이 있었기 때문에 유보.)

✔️capacitor 설정
1. capacitor 설치
npm install @capacitor/core @capacitor/cli
npx cap init

2. android 플랫폼 추가
   npm install @capacitor/android
   npx cap add android

3. next.config.mjs 파일 수정

import withPWA from "next-pwa";

/** @type {import('next').NextConfig} */
const baseConfig = {
  output: "export", // ✅ 반드시 루트에 위치해야 작동함
  eslint: {
    ignoreDuringBuilds: true,
  },
};

const nextConfig = withPWA({
  dest: "public",
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === "development",
});

export default {
  ...baseConfig,
  ...nextConfig,
};

여기서는, 처음에는 pwa 안에 output 을 추가했다가, pwa 상위에 output 을 추가해야한다고 하여서, 상위로 위치 변경함.
이게 맞는지는 좀 더 확인이 필요함

4. npm run build
   하면, build 가 되긴하는데, 중요한 out 파일과 index.html 생성이 안된다.
   이 경우에 npx cap init 으로 나온 결과물 중 하나인 capacitor.config.ts 를 고쳐준다.
   webDir 항목의 값이 ‘public/' 으로 되어있는 것을 out 으로 바꾼다.

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

const config: CapacitorConfig = {
appId: "com.beauty.app",
appName: "semi-beauty-hub",
webDir: "out",
};

export default config;

5. Capacitor로 빌드된 파일 복사
   npx cap copy

=> 바로 이 과정에서부터 막혔다. out 폴더 생성이 안되어있고 index.html 이 없어서 다음으로 진도가 나가지 않고있음

동적 경로인 shops[id] 와 관련된 페이지에 아래 코드를 추가해주고,
id 를 배열로 미리 지정해두는 방법을 시도하는중

import { shopIds } from "@/lib/static-shop-ids";

export async function generateStaticParams() {
return shopIds.map((id) => ({ id }));
}

+참고 )
https://velog.io/@soonmuu/Next.js-Next.js-Capacitor-%EC%84%A4%EC%B9%98
https://velog.io/@tom990422/Next.js-14-Android-with-Capacitor