Initializing a Next.js 14 Project

  1. Initialize a Next.js Project

If you don't have a Next.js project yet, create a new project:

npx create-next-app@latest pwa-next-app
cd pwa-next-app

2. Install PWA Dependencies

Install next-pwa to enable PWA support:

npm install next-pwa

Configuring Next.js 14 for PWA

  1. Configure next.config.js

Create or update the next.config.js file as follows:

// next.config.js
const withPWA = require("next-pwa")({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
  register: true,
  skipWaiting: true,
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = withPWA(nextConfig);

2. Create manifest.json

Create a manifest.json file inside the public directory:

// public/manifest.json
{
  "name": "PWA with Next 14",
  "short_name": "NextPWA",
  "description": "PWA application with Next 14",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. Create service-worker.js (Optional)

next-pwa handles the service worker creation, but you can customize service-worker.js if needed by creating a file in the public directory.

4. Add Application Icons

Place the application icons in the public/icons directory:

  • public/icons/icon-192x192.png
  • public/icons/icon-512x512.png

Add Metadata in layout.jsx

Customize the layout.jsx file with the required metadata:

// layout.jsx
import { Nunito } from "next/font/google";
import "bootstrap/dist/css/bootstrap.min.css";
import "./globals.css";

const nunito = Nunito({ subsets: ["latin"] });

export const metadata = {
  title: "PWA with Next 14",
  description: "PWA application with Next 14",
  generator: "Next.js",
  manifest: "/manifest.json",
  keywords: ["nextjs", "nextjs14", "next14", "pwa", "next-pwa"],
  themeColor: [{ media: "(prefers-color-scheme: dark)", color: "#fff" }],
  authors: [
    { name: "Alldo Faiz Ramadhani" },
    {
      name: "Alldo Faiz Ramadhani",
      url: "https://www.linkedin.com/in/alldofaiz/",
    },
  ],
  viewport:
    "minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover",
  icons: [
    { rel: "apple-touch-icon", url: "icons/icon-128x128.png" },
    { rel: "icon", url: "icons/icon-128x128.png" },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        <meta name="generator" content={metadata.generator} />
        <link rel="manifest" href={metadata.manifest} />
        <meta name="keywords" content={metadata.keywords.join(", ")} />
        {metadata.themeColor.map(({ media, color }, index) => (
          <meta key={index} name="theme-color" media={media} content={color} />
        ))}
        {metadata.authors.map(({ name, url }, index) => (
          <meta key={index} name="author" content={name} {...(url && { href: url })} />
        ))}
        <meta name="viewport" content={metadata.viewport} />
        {metadata.icons.map(({ rel, url }, index) => (
          <link key={index} rel={rel} href={url} />
        ))}
      </head>
      <body className={nunito.className}>{children}</body>
    </html>
  );
}

Build and Run the Application

  1. Build the Application

To build the application for production:

npm run build

2. Run the Application

To run the application after building:

npm start

3. Run in Development Mode

To view the application in development mode:

npm run dev

Verify PWA

  1. Verify in Browser

Chrome: Open DevTools (Ctrl+Shift+I or Cmd+Opt+I), go to the Application tab, and check the PWA status in the Service Workers and Manifest sections.

Firefox: Open DevTools (Ctrl+Shift+I or Cmd+Opt+I), go to the Application tab, and check Service Workers.

2. PWA Testing Tools

Lighthouse: Run a Lighthouse audit in Chrome DevTools to check your PWA.

PWABuilder: Use PWABuilder to test and improve your PWA.

Summary

In order to create a Progressive Web App (PWA) using Next.js, several steps are necessary to set up, configure, build, and verify the application.

1. Setup Project:

Install and configure next-pwa, a plugin that provides built-in support for Progressive Web Apps in Next.js. This involves adding the necessary dependencies and configuring the next.config.js file to enable PWA features such as service workers and manifest.

2. Add Metadata:

Enhance the application's metadata by adding relevant information such as title, description, keywords, and author details in the layout.jsx file. Metadata plays a crucial role in improving SEO and providing a better user experience.

3. Build:

Build the application using the npm run build command. This step compiles the code, optimizes assets, and prepares the application for production deployment. It ensures that the application is ready to be served to users with optimal performance and reliability.

4. Run and Test:

After building the application, run it using the npm start command to start the server and serve the production-ready application. Additionally, testing the application is crucial to ensure its functionality and performance.

5. Verification:

Verify the application's PWA features using various testing tools. This includes checking service worker registration, manifest configuration, offline capabilities, and other PWA-specific requirements. Tools like Lighthouse and PWABuilder can be used to run audits and improve the quality of the PWA.

By following these steps, developers can successfully create, deploy, and verify a Progressive Web App built with Next.js, offering users an engaging and reliable web experience.