🚀 Advanced Storefront Features (Next.js 16)

The frontend project of the store, in addition to fast rendering, includes very advanced features for mobile installation, professional SEO, and cyber security that prepares it for the Enterprise level.

📱 PWA and Offline Mode Support

The store is configured as a Progressive Web App. This means mobile users (Android and iOS) can install the site directly like a native app on their phone.

• Settings: Managed using the @ducanh2912/next-pwa plugin in store/next.config.js.
• Dynamic Manifest: The file store/src/app/manifest.ts generates icon information, theme colors, and the application name.
• Offline Mode (Fallback): If the user's internet is disconnected, the Service Worker automatically redirects the user to the custom ~offline/page.tsx page.

🔒 Strict Security Headers

To protect against common web attacks such as code injection (XSS) and Clickjacking, security headers are injected globally via Next.js:

async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
        { key: 'X-XSS-Protection', value: '1; mode=block' },
        { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Content-Security-Policy', value: "default-src 'self'; ..." }
      ],
    },
  ];
}

🕷️ Dynamic SEO and Multinational Sitemap

Instead of manually updating the sitemap, the sitemap.ts file communicates concurrently with the backend microservices to build the most complete sitemap for Google.