Create-nextjs-pwa
Friday 22/07/2022
·2 min readShare:
This are the steps to create pwa with nextjs
- install next-pwa
pnpm i next-pwa
-
create manifest.json - this file tells the progressive web app how to behave on dektop or mobile. We can create this file manually or using PWA manifest generator. For example: simicart manifest generator
-
download zip file and extract into public folder
-
rename manifest.webmanifest to manifest.json
-
add _document.tsx file with this content:
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
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>
);
}
- configure next.config.js
const withPWA = require("next-pwa")({
dest: "public",
register: true,
skipWaiting: true,
});
// @ts-check
/**
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
* This is especially useful for Docker builds.
*/
// !process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
/** @type {import("next").NextConfig} */
const config = {
reactStrictMode: true,
/**
* If you have the "experimental: { appDir: true }" setting enabled, then you
* must comment the below `i18n` config out.
*
* @see https://github.com/vercel/next.js/issues/41980
*/
i18n: {
locales: ["en"],
defaultLocale: "en",
},
};
module.exports = withPWA(config);
- deploy to vercel or any other platform :)
Share: