[Next.js] Next.js 15버전 PWA 적용 방법

프론트엔드/Next.js

[Next.js] Next.js 15버전 PWA 적용 방법

순코딩 2025. 1. 6. 13:40

설치

$ npm install next-pwa

next.config.ts 설정

[경로 : / next.config.ts ]

// eslint-disable-next-line @typescript-eslint/no-require-imports
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
});

/** @type {import('next').NextConfig} */
const nextConfig = {
   // ...기존에 추가했었던 next.config.ts 설정
};

module.exports = withPWA(nextConfig);

manifest.json 생성

[경로 : / public / manifest.json ]

{
  "name": "{앱 이름}",
  "short_name": "{짧은 앱 이름}",
  "description": "{앱 설명}",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "{앱 아이콘 이미지 192*192 경로)}",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "{앱 아이콘 이미지 512*512 경로)",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

layout.tsx 설정

[경로 : / src / app / layout.tsx ]

// 임포트
import type { Metadata, Viewport } from "next";

// 뷰포트 & 메타 데이터 정의
export const viewport: Viewport = {
  themeColor: "#ffffff",
};

export const metadata: Metadata = {
  title: "{앱 이름}",
  description: "{앱 설명}",
  manifest: "/manifest.json(manifest.json 경로)",
  icons: {
    icon: "/img/app-icon-192.png(아이콘 경로)",
    apple: "/img/app-icon-192.png(아이콘 경로)",
  },
};

// 레이아웃 JSX 작성
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      {/* PWA 관련 메타 태그 추가 */}
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#ffffff" />
        <link rel="apple-touch-icon" href="/img/app-icon-192.png(아이콘 경로)" />
      </head>
      {/* PWA 관련 메타 태그 추가 END */}
      <body>{children}</body>
    </html>
  );
}