add pwa in nextjs

.changeset/plain-spies-smoke.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+add pwa support in nextjs

apps/cli/src/helpers/addons-setup.ts

@@ -10,7 +10,9 @@ import type { ProjectConfig } from "../types";
 export async function setupAddons(config: ProjectConfig) {
 	const { addons, frontend, projectDir } = config;
 	const hasReactWebFrontend =
-		frontend.includes("react-router") || frontend.includes("tanstack-router");
+		frontend.includes("react-router") ||
+		frontend.includes("tanstack-router") ||
+		frontend.includes("next");
 	const hasNuxtFrontend = frontend.includes("nuxt");
 	const hasSvelteFrontend = frontend.includes("svelte");
 	const hasSolidFrontend = frontend.includes("solid");

apps/cli/src/helpers/template-manager.ts

@@ -557,10 +557,20 @@ export async function setupAddonsTemplate(
 		let addonDestDir = projectDir;
 
 		if (addon === "pwa") {
-			addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web");
-			addonDestDir = path.join(projectDir, "apps/web");
-
-			if (!(await fs.pathExists(addonDestDir))) {
+			const webAppDir = path.join(projectDir, "apps/web");
+			if (!(await fs.pathExists(webAppDir))) {
+				continue;
+			}
+			addonDestDir = webAppDir;
+			if (context.frontend.includes("next")) {
+				addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web/next");
+			} else if (
+				context.frontend.some((f) =>
+					["tanstack-router", "react-router", "solid"].includes(f),
+				)
+			) {
+				addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web/vite");
+			} else {
 				continue;
 			}
 		}

apps/cli/src/index.ts

@@ -800,7 +800,10 @@ function processAndValidateFlags(
 			);
 			const hasCompatibleWebFrontend = effectiveFrontend?.some((f) => {
 				const isPwaCompatible =
-					f === "tanstack-router" || f === "react-router" || f === "solid";
+					f === "tanstack-router" ||
+					f === "react-router" ||
+					f === "solid" ||
+					f === "next";
 				const isTauriCompatible =
 					f === "tanstack-router" ||
 					f === "react-router" ||
@@ -828,7 +831,7 @@ function processAndValidateFlags(
 				let incompatibleReason = "Selected frontend is not compatible.";
 				if (config.addons.includes("pwa")) {
 					incompatibleReason =
-						"PWA requires tanstack-router, react-router, or solid.";
+						"PWA requires tanstack-router, react-router, next, or solid.";
 				}
 				if (config.addons.includes("tauri")) {
 					incompatibleReason =

apps/cli/src/prompts/addons.ts

@@ -18,7 +18,8 @@ export async function getAddonsChoice(
 	const hasCompatiblePwaFrontend =
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
-		frontends?.includes("solid");
+		frontends?.includes("solid") ||
+		frontends?.includes("next");
 
 	const hasCompatibleTauriFrontend =
 		frontends?.includes("react-router") ||

apps/cli/templates/addons/pwa/apps/web/next/public/favicon/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="92" height="92"><svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="76" height="76" rx="12" fill="#F5EEFF" stroke="#B79AFF" stroke-width="3"></rect>
+  <text x="46" y="56" text-anchor="middle" font-family="monospace" font-size="40" fill="#8F5BFF">$<tspan dx="0" dy="0">_</tspan></text>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>

apps/cli/templates/addons/pwa/apps/web/next/public/favicon/site.webmanifest.hbs

@@ -0,0 +1,21 @@
+{
+	"name": "{{projectName}}",
+	"short_name": "{{projectName}}",
+	"icons": [
+		{
+			"src": "/web-app-manifest-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "/web-app-manifest-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}

apps/cli/templates/addons/pwa/apps/web/next/src/app/manifest.ts.hbs

@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+	return {
+		name: "{{projectName}}",
+		short_name: "{{projectName}}",
+		description:
+			"my pwa app",
+		start_url: "/new",
+		display: "standalone",
+		background_color: "#ffffff",
+		theme_color: "#000000",
+		icons: [
+			{
+				src: "/favicon/web-app-manifest-192x192.png",
+				sizes: "192x192",
+				type: "image/png",
+			},
+			{
+				src: "/favicon/web-app-manifest-512x512.png",
+				sizes: "512x512",
+				type: "image/png",
+			},
+		],
+	};
+}

apps/cli/templates/frontend/react/next/next.config.ts.hbs

@@ -1,7 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-  output: "export"
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;