Next.js로 PWA를 만드는 방법
5567 단어 webdevreactjavascriptnextjs
이 게시물은 와 함께합니다. 비디오를 보고 싶다면 의 이 비디오를 확인하십시오.
파티를 시작합시다.
PWA 란 무엇입니까?
PWA는 프로그레시브 웹 앱의 약자입니다. 기본적으로 다음과 같은 몇 가지 추가 기능이 있는 HTML, CSS 및 Javascript로 빌드된 웹 앱과 같습니다.
설정
Next.js 앱 만들기
npx create-next-app next-pwa-demo
기본 Next.js 템플릿을 PWA로 변환하겠습니다. 웹 앱을 변환할 수 있습니다.
필요한 종속성 설치
npm i next-pwa # npm
yarn add next-pwa # yarn
매니페스트 생성
매니페스트 생성에 Simicart 을 사용하겠습니다. 앱의 세부 정보를 추가하기만 하면 매니페스트가 생성됩니다. 디스플레이에서
standalone를 선택했는지 확인하십시오.
생성된 매니페스트는 다음과 유사합니다.
{
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "Next PWA",
"short_name": "PWA",
"description": "This app is to demo PWA in Next.js",
"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"
}
]
}
모든 세부 사항을 추가한 후 zip 파일을 설치하고 압축을 풉니다. 압축을 푼 후 공용 폴더의 모든 파일을 끌어다 놓습니다.
manifest.webmanifest를 manifest.json로 이름을 바꿉니다.마지막으로 공개 디렉토리는 다음과 같아야 합니다.
_document.js 만들기
페이지 폴더에
_document.js를 만들고 다음 코드를 추가합니다.import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png"></link>
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
다음 구성에서 PWA 구성
PWA를 구성하기 위해 일부 데이터를 추가해야 하므로
next.config.js에 이 스니펫을 추가합니다.const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
});
앱을 PWA로 만들었습니다 🥳
더 나은 개발 환경 만들기
자동 생성된 파일을 .gitignore에 추가
서비스 작업자 및 workbox와 같은 몇 가지 파일이 공용 폴더에 추가되었음을 알 수 있습니다.
이러한 파일은 지속적으로 변경되며 GitHub에 필요하지 않습니다. 따라서 프로덕션에서 제거하려면 다음을 수행하십시오.
sw.js , sw.js.map , workbox-****.js 및 workbox-****.js.map . .gitignore에 추가합니다.# PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
개발 중 PWA 비활성화
개발 중에는 많은 콘솔 메시지를 제공하기 때문에 PWA를 비활성화할 수 있습니다.
next.config.js에서 이와 같이 비활성화합니다.const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
disable: process.env.NODE_ENV === "development",
},
});
도움이 되었기를 바랍니다. 다음편에서 만나요✌🏻
유용한 링크-
James's video
All socials
Reference
이 문제에 관하여(Next.js로 PWA를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/avneesh0612/how-to-create-a-pwa-with-next-js-4dbm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
