feat: basic config for pwa

.gitignore

@@ -40,3 +40,9 @@ next-env.d.ts
 
 # Storybook
 storybook-static
+
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map

next.config.mjs

@@ -1,5 +1,11 @@
+import withPWA from 'next-pwa'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true, // Enable React strict mode for improved error handling
+  compiler: {
+    removeConsole: process.env.NODE_ENV !== 'development', // Remove console.log in production
+  },
   images: {
     remotePatterns: [
       {
@@ -29,4 +35,9 @@ const nextConfig = {
   },
 }
 
-export default nextConfig
+export default withPWA({
+  dest: 'public', // destination directory for the PWA files
+  disable: process.env.NODE_ENV === 'development', // disable PWA in the development environment
+  register: true, // register the PWA service worker
+  skipWaiting: true, // skip waiting for service worker activation
+})(nextConfig)

package.json

@@ -55,6 +55,7 @@
     "lucide-react": "^0.367.0",
     "next": "14.1.4",
     "next-auth": "^5.0.0-beta.17",
+    "next-pwa": "^5.6.0",
     "prettier": "^2.8.8",
     "qs": "^6.12.1",
     "react": "^18",

public/manifest.json

@@ -0,0 +1,67 @@
+{
+  "name": "PWA Next.js",
+  "short_name": "pwa-nextjs",
+  "theme_color": "#35155D",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "icons/icon.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "splash_pages": null
+}

src/app/layout.tsx

@@ -13,6 +13,7 @@ export const viewport: Viewport = {
   userScalable: false,
   maximumScale: 1.0,
   minimumScale: 1.0,
+  viewportFit: 'cover',
 }
 
 export default function RootLayout({

src/features/common/metadata.ts

@@ -5,6 +5,7 @@ export const Metadatas = {
     return {
       metadataBase: new URL(`https://www.picktoss.com`),
       title: '픽토스 | 나만의 AI 퀴즈',
+      manifest: '/manifest.json',
       description: 'AI로 생성하는 나만의 퀴즈',
       icons: {
         icon: '/images/picktoss-logo.png',

src/middleware.ts

@@ -14,7 +14,14 @@ const publicOnlyUrls: Routes = {
   '/sign-in': true,
 }
 
+const PUBLIC_FILE = /\.(.*)$/
+
 export async function middleware(request: NextRequest) {
+  const isPublicFiles = PUBLIC_FILE.test(request.nextUrl.pathname)
+  if (isPublicFiles) {
+    return
+  }
+
   const session = await auth()
   const publicExists = publicUrls[request.nextUrl.pathname]
   const exists = publicOnlyUrls[request.nextUrl.pathname]