nextJS 14 + PWA 설정.

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

ふたりで

nextJS 14 + PWA 설정. 본문

next.js

nextJS 14 + PWA 설정.

graykang 2024. 3. 14. 12:00

728x90

SMALL

nextJS14 버전의 공식 홈의 튜토리얼 프로젝트에 PWA를 설정해 보았다.

예전에 VueJS 프로젝트에 PWA를 적용하는 방법을 정리한 적이 있는데 그것보다 훨씬 간단한 것 같다.

1. react nextJS 튜토리얼 앱 프로젝트 생성.

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

원하는 경로에 nextjs-dashboard라는 폴더를 생성하고 해당 폴에 Github의 튜토리얼 프로젝트를 clone 한다.

프로젝트 설정이 이미 되어 있기 때문에 종속성 설치는 하지 않는다.

참고: https://nextjs.org/learn/dashboard-app/getting-started

Learn Next.js: Getting Started | Next.js

Create a new Next.js application using the dashboard starter example and explore the project.

nextjs.org

2. next-pwa 모듈 설치.

npm install next-pwa

3. next.config.js 파일을 아래와 같이 수정.

해당 파일은 프로젝트 폴더 바로 아래 위치한다.

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
    dest: 'public',
    register: true,
    skipWaiting: true,
    //disable: process.env.NODE_ENV === "development",
});
const nextConfig = withPWA({
    reactStrictMode: true,
    swcMinify: true,
});

module.exports = nextConfig;

위의 코드는 Next.js 프로젝트에서 PWA(Progressive Web App)를 구현하기 위한 설정을 하는 부분이다

withPWA 함수는 next-pwa 라이브러리를 사용하여 PWA를 설정하는 부분이다. next-pwa 라이브러리를 사용하면 Next.js 애플리케이션을 PWA로 변환할 수 있다.
- dest: PWA 파일들이 생성될 디렉토리를 지정. 여기서는 public 디렉토리로 설정 했다.
- register: Service Worker를 등록할지 여부를 결정. true로 설정되어 있으므로 Service Worker가 등록된다.
- skipWaiting: Service Worker가 업데이트되면 즉시 새 버전으로 전환할지 여부를 결정. true로 설정되어 있으므로 업데이트가 바로 적용 된다.
- disable: 개발 환경(dev)에서 PWA를 비활성화할지 여부를 결정. process.env.NODE_ENV === "development" 조건으로 설정되어 있어서 개발 환경에서는 PWA가 비활성화된다.
nextConfig 변수는 withPWA 함수를 통해 생성된 설정에 추가적인 Next.js 설정을 덮어쓴다.
- reactStrictMode: React Strict Mode를 활성화할지 여부를 나타낸다. true로 설정되어 있어서 활성 된다.
- swcMinify: 빌드 시 SWC를 사용하여 코드를 최소화(minify)할지 여부를 결정. true로 설정되어 있어서 코드 최소화가 적용된다.

마지막으로, module.exports = nextConfig; 구문은 설정이 적용된 Next.js 설정 객체를 내보내어 Next.js 프로젝트에서 사용할 수 있도록 하는 부분이다.

4. manifest.json파일을 아래와 같이 생성한다.

위치는 public 폴더 바로 아래 위치 하면 된다.

{
    "theme_color": "#4f4c4a",
    "background_color": "#4f4c4a",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "next-dashboard",
    "short_name": "next-dashboard",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

아래 링크는 manifest.json 파일과 아이콘 파일을 자동으로 만들어주는 사이트이다.

https://www.simicart.com/manifest-generator.html/

PWA Manifest Generator | SimiCart

www.simicart.com

위 링크를 통해 생성된 파일의 앞축을 풀어 public 폴더 내에 위치시키면 되며, 아이콘 파일의 경로는 manifest파일에

명시한 경로대로 위치시키면 된다.

아이콘 경로의 " / "는 public폴더이다.

728x90

SMALL

5. nextjs-dashboard/app/layout.tsx 에 아래와 같이 메타데이터와 링크 태그를 설정한다.

이 부분은 viewport를 사용하여 설정하는 방법도 있는 것 같다.

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      {/* pwa 사용을 위한 메타태그와 링크 태그.*/}
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <meta name="theme-color" content="#000000" />

      {/* make sure to provide the name of your icon in below.*/}
      <link rel="apple-touch-icon" href="/icon-512x512.png" />
      <link rel="manifest" href="/manifest.json" />      
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

6. 이제 build후 start 또는 dev 명령어를 아래와 같이 실행한다.

PS C:\node-Ex\React-nextJS-ex\nextjs-dashboard> npm run build

> build
> next build

   ▲ Next.js 14.0.2
   - Environments: .env

> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: C:\node-Ex\React-nextJS-ex\nextjs-dashboard\node_modules\next-pwa\register.js
> [PWA] Service worker: C:\node-Ex\React-nextJS-ex\nextjs-dashboard\public\sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (8/8)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    224 B          96.4 kB
├ ○ /_not-found                          870 B          85.3 kB
├ λ /dashboard                           298 B          89.7 kB
├ ○ /dashboard/customers                 142 B          84.6 kB
├ λ /dashboard/invoices                  2.8 kB           99 kB
└ ○ /dashboard/invoices/create           175 B          91.4 kB
+ First Load JS shared by all            84.5 kB
  ├ chunks/472-61f351621ba806f6.js       29.2 kB
  ├ chunks/fd9d1056-d1cf127711f3e2d5.js  53.3 kB
  ├ chunks/main-app-146cd0a55228f90f.js  219 B
  └ chunks/webpack-845f0a4e773717d0.js   1.72 kB


○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js

PS C:\node-Ex\React-nextJS-ex\nextjs-dashboard> npm run start

> start
> next start

   ▲ Next.js 14.0.2
   - Local:        http://localhost:3000

 ✓ Ready in 1153ms
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production

크롬브라우저로 http://localhost:3000에 접속을 하면 아래 그림과 같이 설치할 수 있는 아이콘을 볼 수 있다.

참고로 나의 경우 nextJS 튜토리얼을 쳅터11 까지 진행 한 상태에서 pwa를 적용 하였다.