Next.js 14 → Android (with Capacitor)

nextjs 페이지를 만든 후의 과정이다.
간단하게 nextjs는 npx create-next-app@14.2.4 로 만들었으며, 상세 정보로는
tailwind css, typescript, app router 를 사용한다고 설정하였다.

를 기본적으로 사용하도록 하였다.

capacitor 공식 홈페이지

capacitor 설정

1 capacitor 설치

npm install @capacitor/core @capacitor/cli
npx cap init

2 android 플랫폼 추가

npm install @capacitor/android
npx cap add android

3 프로젝트 빌드

build에 앞서 수정해줘야할게 있다. nextjs는 14버전으로 올라오면서 수정된게 있는데, export를 지원하는 방식이 달라졌다는 것이다.

# next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
};
export default nextConfig;

이렇게 const nextConfig={}; 의 중괄호 사이에 output: ‘export’, 라고 입력해주면 된다.

npm run build

build하면 프로젝트 폴더의 root 경로에 out/ 폴더가 생성되며, 그 안에 정적 페이지 결과물이 저장된다.
이 경우에 npx cap init 으로 나온 결과물 중 하나인 capacitor.config.ts 를 수정해줘야 한다.

# capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-nextjs-app',
  webDir: 'out'
};
export default config;

webDir 항목의 값이 기본적으로 ‘public/’으로 되어있을 건데, 그것을 out으로 수정해주면 된다.
그러면 잘 동작한다.

4 Capacitor로 빌드된 파일 복사

npx cap copy

Android 프로젝트 설정 및 실행

npx cap open android

여기서는 간단하게 어떻게 구현했는지만 정리한 것이다.
단순하게 페이지 하나만 만들어서 동작 잘하는지 체크해본거라 잘 만든 페이지의 경우 원활하게 동작하지 않을 수 있다는 점 유의하길 바란다.
정적페이지로 모두 build 되어야 하기에 웹으로만 구현했던 것에서 일부 수정해야하는 부분이 발생할 수도 있다.

개념은 다음 게시글에 정리할 예정이다.

---

에러 상세 내용

Next.js에서 app 디렉토리를 사용할 때, 동적 경로 매개변수는 params prop을 통해 페이지 컴포넌트에 직접 전달된다. 그러나 params prop은 동적 세그먼트에 대해서만 자동으로 제공되며, 정적 경로에는 제공되지 않는다.

• 주어진 디렉토리 구조를 고려했을 때:
  /app/service/1/page.tsx 파일은 정적 경로이며, 동적 매개변수 (params)를 받지 않는다.
  동적 경로를 위해서는 컴포넌트를 /app/service/[id]/page.tsx 파일에 배치해야 한다. 동적 경로 컴포넌트를 올바르게 설정하는 방법은 다음과 같다:

      // /app/service/[id]/page.tsx
      "use client";
      import { useEffect, useState } from 'react';
      interface ServiceProps {
        params: {
          id: string;
        };
      }
      export default function Service({ params }: ServiceProps) {
        const [id, setId] = useState<string | null>(null);
        useEffect(() => {
          if (params.id) {
            setId(params.id);
          }
        }, [params.id]);
        if (!id) {
          return <div>Loading...</div>;
        }
        return <div>Service {id}</div>;
      }

설명:
1. 정적 경로 (/app/service/1/page.tsx):
이는 정적 경로이며, 동적 매개변수 (params)를 받지 않는다. 따라서 params.id는 undefined가 되어 "Loading..."만 표시된다.
2. 동적 경로 (/app/service/[id]/page.tsx):
이는 동적 경로다. /service/123과 같은 URL을 방문하면 Next.js는 { id: '123' }를 Service 컴포넌트에 params로 전달한다.
동적 경로 테스트:
- 파일이 올바른 경로에 있는지 확인
ex.) /app/service/[id]/page.tsx.
- 동적 경로 패턴에 맞는 URL로 이동하기.
ex.) /service/123.
만약 "Loading..."만 표시된다면, /service/1과 같은 정적 경로를 테스트하고 있기 때문일 수 있다. 이는 동적 경로 로직을 트리거하지 않는다.
동적 경로가 올바르게 설정되고 이를 올바르게 접근하고 있는지 확인함으로써, id 매개변수를 가져와 표시할 수 있을 것이다.