➕ 🔧 📚 ✨ setup next-pwa

setup next-pwa

➕ Adding a dependency, 🔧 Configuration files, 📚 Documentation, ✨ New feature

README.md

@@ -1,11 +1,10 @@
-# 🇳 🚀 😊
-# Next.js + Apollo GraphQL + Joy UI
+# 🇳 🚀 😊  Next.js - Apollo GraphQL - Joy UI
 
 Spend more time __building__ instead of _configuring_ your next project.
 
 ## 🚪 Intro
 
-This is a slightly opinionated starter kit for developing [Next.js](https://nextjs.org/) apps. It uses the [Joy UI](https://mui.com/joy-ui/getting-started/overview/) library from [MUI](https://mui.com/) along with the [Apollo](https://www.apollographql.com/) stack. All [GraphQL](https://graphql.org/) are operations are fully typed with [GraphQL Codegen](https://the-guild.dev/graphql/codegen) and [Zeus](https://github.com/graphql-editor/graphql-zeus). The starter kit also includes a fully functional [authentication system](https://next-auth.js.org/), [localization](https://www.i18next.com/), dark / light mode, and plenty of other goodies for a great developer experience right out of the box.
+This is a slightly opinionated starter kit for developing [Next.js](https://nextjs.org/) apps. It uses the [Joy UI](https://mui.com/joy-ui/getting-started/overview/) library from [MUI](https://mui.com/) along with the [Apollo](https://www.apollographql.com/) stack. All [GraphQL](https://graphql.org/) are operations are fully typed with [GraphQL Codegen](https://the-guild.dev/graphql/codegen) and [Zeus](https://github.com/graphql-editor/graphql-zeus). The starter kit also includes a fully functional [authentication system](https://next-auth.js.org/), [localization](https://www.i18next.com/), [PWA](https://github.com/shadowwalker/next-pwa), dark / light mode, PWA support and plenty of other goodies for a great developer experience right out of the box.
 
 > 👋 Hello there! Follow me [@linesofcodedev](https://twitter.com/linesofcodedev) or visit [linesofcode.dev](https://linesofcode.dev) for more cool projects like this one.
 
@@ -35,6 +34,8 @@ Remaining simple at its core, this project is packed with useful tools that enha
 - 🍞 [React Hot Toast]() - The best toast in town. Smoking hot React notifications.
 - 🌐 [i18next](https://www.i18next.com/) - The easiest way to translate your NextJs apps.
 - 🔍 [Next SEO](https://github.com/garmeeh/next-seo) - The easiest way to add SEO support to your Next.js app.
+- 📱 [Next PWA](
+- https://github.com/shadowwalker/next-pwa) - Zero config PWA plugin for Next.js, with workbox.
 - 🪵 [Axiom logging](https://axiom.co/) - Send structured logs directly from your code and query, stream, & analyze. [Learn more](https://axiom.co/docs/integrations/nextjs).
 
 #### 🛠 Develop and test
@@ -128,6 +129,10 @@ To analyze the page bundles of your Next.js app, run the following command:
 yarn build:analyze
 ```
 
+### 📱 Progressive Web App
+
+This project is configured to be a PWA out of the box, it just needs a few more steps from you to be production ready. Add your image assets and define your manifest files. Start by following the [instructions here](https://github.com/shadowwalker/next-pwa#step-2-add-manifest-file-example).
+
 ## 🎊 Built a project with this starter kit?
 
 That's awesome! Please feel free to open a PR and add your project to the list below.

next.config.js

@@ -6,6 +6,11 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  disable: process.env.NODE_ENV === 'development',
+});
+
 const { version } = require('./package.json');
 
 /** @type {import('next').NextConfig} */
@@ -26,4 +31,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withBundleAnalyzer(withAxiom(nextConfig));
+module.exports = withBundleAnalyzer(withPWA(withAxiom(nextConfig)));

package.json

@@ -73,6 +73,7 @@
     "next-auth": "4.18.7",
     "next-axiom": "0.16.0",
     "next-i18next": "13.0.2",
+    "next-pwa": "5.6.0",
     "next-seo": "5.15.0",
     "rate-limiter-flexible": "2.4.1",
     "react": "18.2.0",

src/pages/_app.tsx

@@ -28,7 +28,7 @@ const MyApp = ({
           <Head>
             <meta
               name="viewport"
-              content="initial-scale=1, width=device-width"
+              content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
             />
             <title>{t(`pageTitle`)}</title>
           </Head>