[Next.js] Next.js + Capacitor 하이브리드앱 세팅

next 설치

npx로 설치
npx create-next-app@latest

app directtory 사용 no

app/ directory 사용시 static site 생성이 정상적으로 되지 않는다.
베타 버전이라 그런지 다른방법이 있는지 모르겠으나 src/page/index.tsx 파일을 기준으로 index.html 파일이 생성되기 때문에 app directtory 사용은 no를 체크해준다

√ What is your project named? ... my-app
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
? Would you like to use experimental `app/` directory with this project? » No / Yes
...

next.config.js 에서 아래 설정을 추가해준다

const nextConfig = {
  	reactStrictMode: true,
    
    //추가
  	swcMinify: true,
	images: {
		unoptimized: true
	},
}

next build & export

빌드와 export를 할수 있는 스크립트를 추가한다

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "static": "next build && next export" // 추가
  },

Capacitor

# capacitor 설치
npm install @capacitor/core @capacitor/cli

# capacitor 초기화
npx cap init --web-dir=out

# 플랫폼 추가
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

capacitor.config.json 파일에서 webDir 경로가 out 으로 설치되어야 한다

capacitor 초기화에서 앱이름과 패키지명을 정해줘야한다.

[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... 앱이름
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
    reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.앱이름.app // 패키지명 형태로 만들면된다

앱빌드

npm run static

static 파일을 내보내준다

!! 이때 ./out/index.html 파일이 정상적으로 생성되지 않으면 npx cap sync 명령어가 실행되지 않는다.
index.html 파일이 생성되지 않으면 next.config.js 설정이 정상적으로 설정되었는지 체크해준다

npx cap sync

./out에 생성된 파일로 플랫폼 싱크를 맞춰준다

npx cap open android
npx cap open ios

그리고 원하는 플랫폼으로 열어 애뮬레이터나 테스트폰으로 빌드가 됐는지 확인한다