- 기록을 목적으로 한 글입니다... 나중에 따로 정리할 예정..
이번 프로젝트는 웹환경이며 push알람이 필요해서 pwa로 구현해보기로 했다.
appDir:true 버전으로 만들기를 시도했다.
유튜브 영상을 보면서 진행하였다.
manifest-generator에서 manifest 파일을 만들어주고!
public폴더 안에 넣어주었다.
공식문서 upgrade-guide를 확인하면 _app.js와 _document.js가 layout.jsx에 합쳐졌다.
그래서 _document.js에 작성해야 할 것을 layout.jsx에 작성해주었다.
// layout.jsx
import './globals.css';
export const metadata = {
title: 'Green Cherry Business',
description: 'Green Cherry Business by create next app',
};
const Layout = ({ children }) => {
return (
<html>
<head>
<link rel='manifest' href='/manifest.json' />
<link rel='apple-touch-icon' href='/icon-192x192.png'></link>
<meta name='theme-color' content='#84A59D' />
</head>
<body>{children}</body>
</html>
);
};
export default Layout;const withPWA = require('next-pwa');
module.exports = withPWA({
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching: require('next-pwa/cache'),
disable: process.env.NODE_ENV === 'development',
},
experimental: {
appDir: true,
},
});The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config바로 오류 발생...
const withPlugins = require('next-compose-plugins');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = withPlugins(
[
[
withPWA,
{
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching,
disable: process.env.NODE_ENV === 'development',
},
},
],
],
nextConfig,
);
빌드는 되지만 pwa임을 모른다.
const withPWA = require('next-pwa')({
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching: require('next-pwa/cache'),
disable: process.env.NODE_ENV === 'development',
},
});
const nextConfig = withPWA({
experimental: {
appDir: true,
},
});
module.exports = nextConfig;> [PWA] url: /sw.js> [PWA] scope: /
> [PWA] Compile server
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration Failed to compile.
Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'pwa' property is not expected to be here.
> Build failed because of webpack errorsappDir은 못하는건가?ㅠ
experimental은 자료가 너무없다..
stackoverflow에서 발견한 2주전에 쓰여진 나와 비슷한 문제...
안전하게 가자!😂
// _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='#84A59D' />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;// next.config.js
const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching,
});
const nextConfig = withPWA({
// next config
});
module.exports = nextConfig;
일단 된거겠지//
https://noogoonaa.tistory.com/110
https://lemontia.tistory.com/1073
https://vroomfan.tistory.com/52
개발을 잘하자!
혹시.. npm run buid -> npm start 로 실행후 개발자도구 lighthouse 로 체크해보셨나요?
npm run dev로 하면 성공하는데 build 후 실행하면 pwa start_url.. 어쩌구 하면서 실패합니다.