본문으로 이동
Capgo 로고
튜토리얼

Capacitor 8을 사용하여 iOS & Android로 변환하는 다음.js 앱

Capacitor 8을 사용하여 기존의 다음.js 15 웹 애플리케이션을 네이티브 iOS 및 Android 모바일 앱으로 변환하는 방법에 대한 완전한 가이드입니다. 정적 내보내기 구성, 네이티브 플러그인 추가, 앱 스토어에 배포하는 방법을 포함합니다.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터
Capacitor 8을 사용하여 iOS & Android로 변환하는 다음.js 앱

Introduction

기존의 Next.js 웹 애플리케이스가 있나요? 이 안내서를 통해 기존의 Next.js 웹 애플리케이스를 native iOS 및 Android 모바일 앱으로 변환하는 방법을 배울 수 있습니다. Capacitor 8 — 성능이 향상되고 새로운 기능이 추가된 최신 버전입니다.

Capacitor는 웹 앱을 네이티브 컨테이너에.wrap하여 기존의 React 코드베이스를 유지하면서 기기 API(카메라, 파일 시스템, 푸시 알림 등) 접근이 가능합니다. React Native와 달리, 기존의 Next.js 코드를 다시 작성할 필요가 없습니다. — code는 기존의 Next.js 코드를 그대로 사용할 수 있습니다.

학습할 내용:

  • 기존의 Next.js 앱을 정적 내보내기로 구성합니다.
  • Capacitor 8에 필수 네이티브 플러그인을 추가합니다.
  • iOS 및 Android 시뮬레이터에서 빌드 및 테스트합니다.
  • 빠른 개발을 위해 라이브 리로드를 활성화합니다.
  • 선택적으로 Konsta UI를 추가하여 네이티브가 보이는 컴포넌트를 사용합니다.

새로운 프로젝트를 처음부터 시작하고 싶으신가요? Next.js 모바일 앱을 처음부터 구축하는 방법.

Capacitor를 사용하는 이점

  • Code 재사용: Next.js는 재사용 가능한 컴포넌트를 작성하고 웹 및 모바일 앱 간에 code를 공유할 수 있으므로 개발 시간과 노력을 절약할 수 있습니다.
  • 성능: Next.js는 서버 사이드 렌더링 및 code 분할과 같은 내장 성능 최적화 기능을 제공하여 빠른 로딩 시간과MOOTH 사용자 경험을 보장합니다.
  • 네이티브 기능: Capacitor는 카메라, 위치 정보 및 기타 기능을 제공하여 기능이 풍부한 모바일 앱을 구축할 수 있습니다.
  • 간소화된 개발: Capacitor를 사용하면熟悉한 웹 기술을 사용하여 모바일 앱을 개발하고 테스트할 수 있으며 학습 곡선이 줄어들고 개발 프로세스가 단순화됩니다.

사전 요구 사항

시작하기 전에 다음을 확인하세요:

  • Node.js 18+ 설치
  • 이미 존재하는 Next.js 15+ 애플리케이션
  • Xcode (iOS 개발을 위해 macOS만)
  • Android Studio (Android 개발을 위해)

Next.js 앱을 위한 모바일 설정

Next.js 앱을 정적으로 내보내기를 위해 설정하는 첫 단계입니다. Capacitor는 정적 HTML/JS/CSS 파일을 네이티브 앱으로 패키징하기 위해 필요합니다.

앱을 열어 next.config.js (or next.config.ts) 파일과 함께 export 설정을 추가하세요:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Next.js 설정은 정적 HTML 파일을 생성하고 output: 'export' 서버가 필요로 하는 Next.js 이미지 최적화를 무시합니다. images: { unoptimized: true } 중요:

서버가 필요한 기능(__CAPGO_KEEP_0__ 경로, 서버 컴포넌트에 데이터 페칭 등)을 사용 중이라면, 클라이언트 사이드 대안 또는 외부 API를 사용하거나 리팩토링해야 합니다. If you’re using features that require a server (API routes, server components with data fetching, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

정적 export를 테스트하려면 다음 명령어를 실행하세요: package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "mobile": "bun run build && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

정적 export를 테스트하려면 다음 명령어를 실행하세요:

bun run build

프로젝트의 루트 폴더에 out 폴더가 생성되어야 합니다. 이 폴더에는 Capacitor이 네이티브 앱에 포함할 정적 파일이 모두 포함되어 있습니다.

프로젝트에 Capacitor 8을 추가하세요.

Next.js 앱을 네이티브 모바일 컨테이너로 패키징하려면 다음 단계를 따르세요:

  1. Capacitor core 및 CLI을 설치하세요.
bun add @capacitor/core
bun add -D @capacitor/cli
  1. Capacitor에서 필요로하는 일반적인 플러그인을 설치하세요:
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/preferences

이 플러그인은 다음 기능을 제공합니다:

  • @capacitor/app앱 라이프 사이클 이벤트 (전경/후경, URL)를 처리합니다.
  • @capacitor/keyboard모바일에서 키보드 동작을 제어합니다.
  • @capacitor/splash-screen네이티브 스플래시 스크린을 관리합니다.
  • @capacitor/preferences키-값 데이터를 영구적으로 저장합니다.
  1. 프로젝트 세부 정보와 함께 Capacitor을 초기화하세요:
bunx cap init my-app com.example.myapp --web-dir out

대체 my-app 앱 이름과 com.example.myapp 역 도메인 표기법의 앱 ID

  1. 프로퍼한 구성으로 capacitor.config.ts 네이티브 플랫폼을 설치하세요:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
    },
  },
};

export default config;
  1. 네이티브 플랫폼 폴더를 추가하세요:
bun add @capacitor/ios @capacitor/android
  1. __CAPGO_KEEP_0__은 프로젝트의 루트 폴더에 네이티브 프로젝트를 포함하는 
bunx cap add ios
bunx cap add android

Capacitor will create ios 폴더를 만들 것입니다. android Android 프로젝트를 빌드하려면

이용하실 수 있습니다. 안드로이드 스튜디오. iOS의 경우 Mac에서 Xcode.

  1. 프로젝트를 빌드하고 동기화하세요:
bun run mobile

이것은 사용자 지정 스크립트를 실행하여 Next.js 프로젝트를 빌드하고 네이티브 플랫폼과 정적 파일을 동기화합니다.

네이티브 앱 빌드 및 배포

네이티브 모바일 앱을 빌드하고 배포하려면 다음 단계를 따르세요: iOS 앱을 개발하려면 Xcode가 설치되어야 하며, 안드로이드 앱을 개발하려면 안드로이드 스튜디오가 설치되어야 합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS의 경우 Apple Developer Program에 가입하고 안드로이드의 경우 Google Play Console에 가입해야 합니다. Xcode 설치되어야 합니다. 설치되어야 합니다. 등록해야 합니다.

  1. 등록해야 합니다.

For iOS:

bun run mobile:ios

For Android:

bun run mobile:android

Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. Build and run the app:

android-studio-run

  • Android Studio에서 프로젝트가 준비되기를 기다리십시오. 그런 다음 연결된 장치 또는 에뮬레이터에 앱을 배포하기 위해 '실행' 버튼을 클릭하십시오. xcode-run

  • Xcode에서 실제 장치에 앱을 배포하기 위해 서명 계정을 설정하십시오. 이 작업을 처음하는 경우 Xcode는 Apple Developer Program에 가입한 경우에만 이 과정을 안내하십시오. 설정이 완료되면 '재생' 버튼을 클릭하여 연결된 장치에서 앱을 실행하십시오.

Next.js 웹 앱을 모바일 장치에 성공적으로 배포했습니다.

nextjs-mobile-app
개발 중에는 더 빠른 방법도 있습니다...

Capacitor Live Reload

개발 중에는 즉시 모바일 기기에서 변경 사항을 볼 수 있는 라이브 리로딩을 사용할 수 있습니다. 이 기능을 활성화하려면 다음 단계를 따르십시오:

  1. 로컬 IP 주소를 찾으십시오:

  • macOS에서 터미널에서 다음 명령어를 실행하십시오:

    ipconfig getifaddr en0

  • Windows에서 실행하십시오:

    ipconfig

    출력에서 IPv4 주소를 찾으십시오.

  1. 개발 서버로 가기 위해 capacitor.config.ts 로컬 IP 주소 (예: 
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

export default config;

로컬 IP 주소로 바꾸십시오. YOUR_IP_ADDRESS 자연어 프로젝트에 변경 사항을 적용하려면: 192.168.1.100).

  1. 명령어는 웹 폴더와 구성 변경 사항을 자연어 프로젝트로 복사하지만 전체 프로젝트를 업데이트하지 않습니다.
bunx cap copy

__CAPGO_KEEP_0__ copy __CAPGO_KEEP_1__

  1. __CAPGO_KEEP_0__ 앱을 Android Studio 또는 Xcode에서 다시 빌드하고 실행하세요.

__CAPGO_KEEP_0__ 앱의 변경 사항이 생기면, Next.js 앱이 자동으로 리로드되어 변경 사항을 반영합니다.

주의: 새로운 플러그인이나 네이티브 파일을 설치하거나 변경하면, 네이티브 프로젝트를 다시 빌드해야 합니다. 왜냐하면 라이브 리로드는 웹 code 변경 사항만 적용되기 때문입니다.

Capacitor 플러그인 사용

Capacitor 플러그인은 네이티브 장치 기능에 접근할 수 있도록 Next.js 앱에 제공합니다. 예를 들어, Share 플러그인을 사용해 보겠습니다. Share 플러그인 설치 __CAPGO_KEEP_0__ 파일을 Share 플러그인을 사용하도록 업데이트하세요.

  1. 변경 사항을 네이티브 프로젝트와 동기화하세요.
bun add @capacitor/share
  1. 앞서 설명한 바와 같이 새로운 플러그인을 설치하면, 동기화 작업을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요: pages/index.js __CAPGO_KEEP_0__ 플러그인 사용을 통해 네이티브 장치 기능에 접근할 수 있습니다.
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';

export default function Home() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends',
    });
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Capgo!</a>
        </h1>

        <p className={styles.description}>
          <h2>Cool channel</h2>
          <button onClick={() => share()}>Share now!</button>
        </p>
      </main>
    </div>
  );
}
  1. __CAPGO_KEEP_0__ 플러그인 사용을 통해 네이티브 장치 기능에 접근할 수 있습니다.

__CAPGO_KEEP_0__ 플러그인 사용을 통해 네이티브 장치 기능에 접근할 수 있습니다.

bun run mobile

Or just sync without rebuilding:

bunx cap sync
  1. Rebuild and run the app on your device.

Now, when you click the “Share now!” button, the native share dialog will appear, allowing you to share the content with other apps.

next-capacitor-share

To make the button look more mobile-friendly, we can add some styling using my favorite UI component library for web apps - Next.js (no pun intended).

Konsta UI v5와 Tailwind CSS 4를 추가합니다.

__CAPGO_KEEP_0__년 동안 Ionic 을 사용하여 멋진 크로스 플랫폼 애플리케이션을 만들었습니다. 그동안 최고의 선택 중 하나였습니다. 하지만 이제는 더 이상 추천하지 않습니다. Next.js와 통합하기가 매우 복잡하고, 이미 가지고 있는 Tailwind CSS 4를 사용할 때는 그만한 가치가 없습니다. iOS와 Android에 특화된 스타일링을 가진 정말 멋진 모바일 UI를 원한다면 Konsta UI v5를 추천합니다. __CAPGO_KEEP_0__에 Tailwind CSS 4가 필요합니다..

__CAPGO_KEEP_0__이 필요합니다.

__CAPGO_KEEP_0__이 필요합니다. Tailwind CSS 4가 이미 설치되어 있습니다 Next.js 앱의 모바일 UI를 향상시키기 위해 사용할 수 있는 Konsta UI v5, iOS 및 Android 스타일링에 적합한 모바일 UI 컴포넌트 라이브러리를 사용하세요. Konsta UI v5를 통합하기 위한 단계를 따르세요:

  1. Konsta UI v5를 설치해야 하는 패키지를 설치하세요:
bun add konsta
  1. Konsta UI 테마를 주 CSS 파일에 임포트하세요 (예를 들어 styles/globals.css):
@import 'tailwindcss';
/* import Konsta UI v5 theme */
@import 'konsta/theme.css';
  1. Next.js에서 Tailwind CSS 4를 구성하세요 (PostCSS):

프로젝트 루트에 postcss.config.mjs Tailwind v4는 PostCSS를 직접 Next.js에서 사용합니다. 글로벌 임포트를

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

(위에 이미 추가했습니다). styles/globals.css Konsta UI v5로 앱을 감싸세요

  1. __CAPGO_KEEP_0__ App 소성분을 pages/_app.js:
import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

예시 페이지

설치가 완료되면, Next.js 페이지에서 Konsta UI v5 React 컴포넌트를 사용할 수 있습니다.

  1. 업데이트를 pages/index.js Konsta UI v5 컴포넌트를 사용하기 위해 파일을 업데이트하세요:
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}
  1. Material Design 테마를 위해 Roboto 폰트를 추가하세요 (Konsta UI v5에 필요합니다):

Next.js 또는 pages/_document.js main HTML 파일에 추가하세요:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>
  1. 개발 서버를 재시작하고 앱을 다시 빌드하세요.

Next.js 앱은 Konsta UI v5와 Tailwind CSS 4로 스타일링된 네이티브 모바일 UI를 가집니다.

성능 최적화

Next.js 및 Capacitor 앱의 최적 성능을 보장하기 위해 다음 최적화 방법을 고려하세요:

  • 사용하지 않는 의존성 및 자산을 제거하여 앱 크기를 최소화하세요.
  • 이미지 및 기타 미디어 파일을 로드 시간을 줄이기 위해 최적화하세요.
  • 컴포넌트 및 페이지에 대한 느긋한 로딩을 구현하여 초기 로드 성능을 향상하세요.
  • Next.js와 함께 서버 사이드 렌더링 (SSR)을 사용하여 앱의 로드 속도와 검색 엔진 최적화 (SEO)를 향상하세요.
  • Capacitor의 내장 최적화 기능을 활용하세요. 예를 들어, 웹 뷰 캐싱 및 앱 번들링을 사용하세요.

결론

Capacitor 8을 사용하여 기존의 Next.js 웹 애플리케이션을 iOS 및 Android 앱으로 성공적으로 변환했습니다. 웹 코드베이스는 이제 모바일 장치에서 실행되며 장치 API에 접근할 수 있습니다.

성취한 것:

  • Next.js를 정적 내보내기 위해 구성했습니다.
  • Capacitor 8을 포함하여 필수 플러그인을 추가했습니다.
  • iOS 및 Android 시뮬레이터에 빌드 및 배포했습니다.
  • 개발 중에 라이브 리로드를 활성화했습니다.
  • __CAPGO_KEEP_0__

다음 단계:

  • 설정 Capgo 앱 스토어 재제출 없이 오버 더 에어 업데이트
  • 카메라, 위치 정보, 푸시 알림 등 네이티브 플러그인 추가
  • 프로덕션용 앱 아이콘 및 스플래시 화면 구성
  • 애플 스토어 및 구글 플레이 제출을 위한 앱 준비

새로운 프로젝트 시작? Next.js 모바일 앱 만들기 __CAPGO_KEEP_0__

자세한 설명과 함께 가이드를 따라 해보세요.

Capgo을 사용하여 더 나은 앱을 더 빠르게 빌드하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.

Capacitor 8을 사용하여 Next.js 앱을 iOS 및 Android로 변환하세요.

__CAPGO_KEEP_0__를 사용 중이라면 Capacitor 8을 사용하여 Next.js 앱을 iOS 및 Android로 변환하세요. __CAPGO_KEEP_0__를 사용하여 native 플러그인 작업을 계획하고 Capgo 플러그인 디렉토리와 연결하세요. 제품 워크플로우에 대한 Capgo 플러그인 디렉토리에서 Capacitor 플러그인에 의해 Capgo 제품 워크플로우에 대한 Capacitor 플러그인에 의해 Capgo 플러그인을 추가하거나 업데이트 제품 워크플로우에 대한 플러그인을 추가하거나 업데이트 아이오닉 엔터프라이즈 플러그인 대체 제품 워크플로우에 대한 아이오닉 엔터프라이즈 플러그인 대체 Capgo 네이티브 빌드 제품 워크플로우에 대한 Capgo 네이티브 빌드

Capacitor 앱의 실시간 업데이트

Capgo 웹-layer 버그가 활성화된 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 패치를 배포하세요. 사용자는 배경에서 업데이트를 받으며, 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

블로그에서 최신 뉴스

Capgo는 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.

Capacitor 앱에서 2-Way 통신
개발, 모바일, 업데이트
2025년 4월 26일

Capacitor 앱에서 2중 통신

OTA 업데이트를 피해야 하는 5가지 일반적인 실수
개발, 보안, 업데이트
2025년 4월 13일

OTA 업데이트를 피해야 하는 5가지 일반적인 실수

모바일 앱 라이브 업데이트의 5가지 보안最佳 관행
개발, 모바일, 업데이트
2025년 1월 14일

모바일 앱 라이브 업데이트의 5가지 보안最佳 관행

블로그에서 모두 보기