설치
$ 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>
);
}
빌드
$ npm run build이 때 next-pwa 패키지가 자동으로 서비스 워커(public/ 폴더 내 sw.js, workbox-???.js)를 생성합니다.
실행
$ npm run dev
결과
실행 결과 성공적으로 mainfest.json이 전달된 모습과 앱 설치 버튼이 추가된 모습을 확인할 수 있습니다.
주의 사항
PWA는 HTTPS 환경에서만 동작합니다. 로컬 개발 시 localhost를 사용하고, 배포 환경에서는 HTTPS가 적용된 도메인을 사용해야 합니다.
참고 자료
Next.js 프로젝트 PWA 구축하기
next js에 pwa를 구축해보자
velog.io
https://gxxrxn.github.io/nextjs-pwa/
Next.js 프로젝트에 PWA 기술 적용하기
이것저것 다양한 기술들을 사용해볼 겸 인터렉티브한 웹 포트폴리오를 만들고 있다! 어느정도 구현된 포트폴리오를 로 만들어봤는데, 그 과정을 기록해보려고 한다. PWA (Progressive Web Apps) 구글 PW
gxxrxn.github.io
'프론트엔드 > Next.js' 카테고리의 다른 글
| [Next.js] Next.js 네이버 웹마스터 검색 엔진 최적화(SEO) 가이드 (0) | 2025.01.08 |
|---|---|
| [Next.js] Next.js 15버전 GA 태그 추가 방법 (0) | 2025.01.06 |
| [Next.js] 이미지 최적화, <Image/> 사용 방법 (0) | 2025.01.04 |
| [Next.js] Next.js + styled-components + MUI 프로젝트 세팅(그리고 styled-components 글로벌 스타일링과 MUI 커스텀 테마 적용하기) (0) | 2024.12.19 |
| [Next.js] Next.js 폴더(디렉토리) 구조 템플릿 (0) | 2024.12.19 |
