영원히 흘러가는 강

next-pwa 적용해보기 본문

NEXT.js

next-pwa 적용해보기

double_R_one_G 2025. 3. 4. 18:33
728x90

 

평소 어떤 기술을 언제 사용할지 모르기에 많은 기술을 접해보고자 하는 마음이 있는데 

 

just do it!!!

이번 프로젝트에서는 모바일 친화적이고 주요 기능이 모바일 기능이다 보니 native와 pwa에서 고민을 하였다.

 

최종적으로 pwa 도입 확정!!

native 대신 pwa를 선택한 이유는 이미 작성한 프로젝트가 있기에 새로 native로 작성하는 거보다 pwa 도입이 효율적이라고 판단하였다

 

물론 성능이나 기능 측면에서는 아쉬운 부분도 있지만, PWA는 점점 더 발전하고 있기 때문에 이를 테스트해보고 싶어서 이 글을 작성한다.

 



1. Next.js를 사용중이기에 next-pwa 도입

 

평소 사이드프로젝트에서는 stable 이긴 해도 최고로 높은 버전을 사용하고 있다.


그래서 내 프로젝트는 Next.js 15ver 이고 당연히도 app router를 사용 중이다.

 

 우선은 프로젝트에 라이브러리 설치부터 진행하자.

npm install next-pwa

 

 

2. next.config.ts 수정하기

next.js 설정 파일에 pwa를 적용하기 위해 설정을 변경한다.

import type { NextConfig } from "next";

const withPWA = require("next-pwa")({
  dest: "public",
});

const nextConfig: NextConfig = {
  /* config options here */
};

export default withPWA(nextConfig);

 

withPWA로 nextConfig를 감싸서 export 진행

 

 

3. manifest.json 생성하기

 

manifest 파일이 pwa를 구성하면서 가장 핵심이 되는 파일이다.

https://progressier.com/pwa-manifest-generator

 

PWA Manifest Generator | Progressier

This free tool allows you create an app manifest

progressier.com

 

쉽게 설정을 도와주는 사이트가 있어 유용하게 사용하였다.

작성해야 하는 부분은 아래와 같다

 

  • short_name (앱에서 보이는 이름)
  • theme_color , backgroud_color (테마 및 배경 색)
  • start_url (앱 시작 시 보여줄 화면)

그 외에 설명 및 스코프는 본인의 환경에 맞게 설정하면 될 것 같다.

 

 

4. 아이콘 생성하기

 

manifest.json에 추가로 아이콘 설정까지 넣어줘야 완성

 

아이콘으로 보여줄 이미지를 생성하였다면

각각의 사이즈 별로 추가를 해줘야 하는데 이 또한 유용한 사이트가 존재한다.

https://www.pwabuilder.com/imageGenerator

 

PWABuilder

 

www.pwabuilder.com

 

여기서 다운로드한 파일의 경로를 지정을 잘해줘야 한다.

public 폴더가 루트라서 나의 경우 아래와 같이 작성하였다.

...
"icons": [
    {
      "src": "/logo/logo-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/logo/logo-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/logo/logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
  ...

 

나의 경우에는 1차적으로 incons를 icon으로 작성하여 휴먼 에러로 시간을 좀 보냈고

purpose를 작성해줘야 하는데

192x192 / 512x512 두 개는 필수로 작성해줘야 하는 사이즈이다.

아래는 내 최종본 manifest.json 파일이다.

{
  "name": "시간의 색이 보인다면",
  "short_name": "시간의 색",
  "theme_color": "#ddd9d9",
  "background_color": "#ffffff",
  "orientation": "any",
  "display": "standalone",
  "dir": "auto",
  "lang": "ko-KR",
  "description": "생활계획표로 보는 시간의 색",
  "start_url": "/?app=pwa",
  "icons": [
    {
      "src": "/logo/logo-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/logo/logo-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/logo/logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

 

5. manifest 헤드에 추가해 주기


작성한 manifest가 적용될 수 있게 태그로 추가를 해줘야 한다.

루트 디렉토리인 layout.tsx에 작성해 준다.

  <head>
        <link rel="manifest" href="/manifest.json" />
  </head>



6.  실행

데스크톱 : 본인의 크롬 브라우저의 주소창 옆 PWA 설치 아이콘

 

안드로이드 : 데스크톱과 동일 혹은 웹페이지 메뉴에서 홈 화면에 추가 선택

ios : 공유 아이콘 클릭 후 홈 화면에 추가 선택


* 많은 블로그 등을 확인하면 라이트 하우스로 확인해본다는 말이있는데 종료되었으며

개발자도구 - 애플리케이션 에서 manifest가 설정되었는지 확인해보면 된다.




처음 접해본다면 여러 휴먼에러를 제외한다면 몇 시간 정도의 시간만 소요하면 된다.

간단하지만 활용만 잘한다면 앱과 동일한 기능을 추가할 수 있기에 인기가 많은듯하다.

 

이상 pwa 설정하기 끝

728x90

'NEXT.js' 카테고리의 다른 글

Nextjs useEffect 2번 호출  (0) 2024.05.14
NEXT.js 14  (0) 2023.10.31
'NEXT.js' Related Articles more
Comments