feat: 🎉 update to be nextjs project

Signed-off-by: Newton <5769156+iamnewton@users.noreply.github.com>

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_ENVIRONMENT="production"

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_ENVIRONMENT="development"

.github/labeler.yml

@@ -19,10 +19,3 @@ enhancement:
   - changed-files:
     - any-glob-to-any-file: src/**
   - head-branch: "^feat-"
-
-# Add "release" label to any PR that is opened against the `main` branch
-release:
-- all:
-  - changed-files:
-    - any-glob-to-any-file: .changeset/*
-  - base-branch: "main"

.gitignore

@@ -87,3 +87,10 @@ coverage
 reports
 dist
 super-linter-output
+.next
+next-env.d.ts
+out
+build
+.vercel
+.env*.local
+*storybook.log

.storybook/decorators.tsx

@@ -0,0 +1,6 @@
+import { type Decorator } from "@storybook/react";
+import { Layout } from "../app/layout";
+
+export function PageDecorator (Story): Decorator => {
+	return <Layout><Story /></Layout>;
+}

.storybook/main.ts

@@ -1,6 +1,4 @@
-import * as path from "node:path";
-import { type StorybookConfig } from "@storybook/react-vite";
-import { mergeConfig } from "vite";
+import { type StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
 	addons: [
@@ -15,23 +13,16 @@ const config: StorybookConfig = {
 	docs: {
 		defaultName: "Documentation",
 	},
+	features: {
+		experimentalRSC: true,
+	},
 	framework: {
-		name: "@storybook/react-vite",
+		name: "@storybook/nextjs",
 		// https://storybook.js.org/docs/api/main-config/main-config-framework
 		options: {},
 	},
 	staticDirs: ["../public"],
 	stories: ["../src/**/*.mdx", "../src/**/*.story.@(js|jsx|mjs|ts|tsx)"],
-	// @TODO: abstract out to shared vite.config.ts
-	async viteFinal(config, options) {
-		return mergeConfig(config, {
-			resolve: {
-				alias: {
-					"@": path.resolve(__dirname, "../src"), // Adjust the path based on your project structure
-				},
-			},
-		});
-	},
 };
 
 export default config;

.storybook/preview.ts

@@ -2,14 +2,15 @@ import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { type Preview } from "@storybook/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
-import "../src/app/app.css";
+import "../app/app.css";
 
 // Initialize MSW
-initialize();
+initialize({ onUnhandledRequest: "bypass" });
 
 const preview: Preview = {
 	layout: "centered",
 	loaders: [mswLoader],
+    nextjs: { appDirectory: true },
 	parameters: {
 		controls: {
 			matchers: {
@@ -29,6 +30,11 @@ const preview: Preview = {
 		},
 	},
 	tags: ["autodocs"],
+	test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      dangerouslyIgnoreUnhandledErrors: true,
+    },
 };
 
 export default preview;

README.md

@@ -1,17 +1,17 @@
-# React Template
+# NextJS Template
 
-A React template used within the Galaxy.
+A NextJS template used within the Galaxy.
 
 ## Installation
 
 ```bash
-npm install --save-dev @theholocron/react-template
+npm install --save-dev @theholocron/nextjs-template
 ```
 
 ## Usage
 
 ```typescript
-import { Component, type ComponentProps } from "@theholocron/react-template";
+import { Component, type ComponentProps } from "@theholocron/nextjs-template";
 
 function App (props: ComponentProps) {
 	return (
@@ -22,4 +22,4 @@ function App (props: ComponentProps) {
 
 ## Documentation
 
-Check out [The Holocron Archive](https://docs.theholocron.dev/projects/react-template/) for more information.
+Check out [The Holocron Archive](https://docs.theholocron.dev/nextjs-template/) for more information.

src/app/app.css → app/app.css

@@ -215,12 +215,12 @@ textarea {
 
 @font-face {
 	font-family: "percolate";
-	src: url("./assets/icon/percolate.eot?-5w3um4");
+	src: url("/icon/percolate.eot?-5w3um4");
 	src:
-		url("./assets/icon/percolate.eot?#iefix5w3um4") format("embedded-opentype"),
-		url("./assets/icon/percolate.woff?5w3um4") format("woff"),
-		url("./assets/icon/percolate.ttf?5w3um4") format("truetype"),
-		url("./assets/icon/percolate.svg?5w3um4") format("svg");
+		url("/icon/percolate.eot?#iefix5w3um4") format("embedded-opentype"),
+		url("/icon/percolate.woff?5w3um4") format("woff"),
+		url("/icon/percolate.ttf?5w3um4") format("truetype"),
+		url("/icon/percolate.svg?5w3um4") format("svg");
 	font-weight: normal;
 	font-style: normal;
 }

app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import * as React from "react";
+import MSW from "../msw";
+
+import "./app.css";
+
+if (process.env.NEXT_RUNTIME === "nodejs") {
+	const { server } = require('../msw/node');
+	server.listen();
+}
+
+export const metadata: Metadata = {
+	title: "Next.js App Router + React Server Components Demo",
+	description: "Demo of React Server Components in Next.js.",
+	openGraph: {
+		title: "Next.js App Router + React Server Components Demo",
+		description: "Demo of React Server Components in Next.js.",
+		images: ["https://next-rsc-notes.vercel.app/og.png"],
+	},
+	robots: {
+		index: true,
+		follow: true,
+	},
+};
+
+export type WithChildren = Readonly<{
+	children: React.ReactNode;
+}>;
+
+export default function RootLayout (props: WithChildren) {
+	return (
+		<html lang="en">
+			<body>
+				<MSW.Provider>{props.children}</MSW.Provider>
+			</body>
+		</html>
+	);
+}

app/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import * as React from "react";
+import { Index } from "../pages/";
+
+export default function IndexPage () {
+	return <Index />;
+}

msw/browser.ts

@@ -0,0 +1,6 @@
+"use client";
+
+import { setupWorker } from "msw/browser";
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

msw/handlers.ts

@@ -0,0 +1,7 @@
+import { handlers as authHandlers } from "../src/auth/handlers";
+import { handlers as taskHandlers } from "../src/tasks/handlers";
+
+export const handlers = [
+	...taskHandlers,
+	...authHandlers,
+];

msw/index.ts

@@ -0,0 +1,3 @@
+import { Provider } from "./msw";
+
+export default { Provider };

msw/msw.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Suspense, use } from "react";
+
+const mockingEnabledPromise =
+	typeof window !== "undefined"
+		? import("./browser").then(async ({ worker }) => {
+			await worker.start({
+				onUnhandledRequest(request, print) {
+					if (request.url.includes("_next")) {
+						return
+					}
+					print.warning()
+				},
+			})
+		})
+		: Promise.resolve()
+
+
+export type WithChildren = Readonly<{
+	children: React.ReactNode;
+}>;
+
+function Wrapper (props: WithChildren) {
+	use(mockingEnabledPromise);
+	return props.children;
+}
+
+export function Provider (props: WithChildren) {
+	// If MSW is enabled, we need to wait for the worker to start,
+	// so we wrap the children in a Suspense boundary until it's ready.
+	return (
+		<Suspense fallback={null}>
+			<Wrapper>{props.children}</Wrapper>
+		</Suspense>
+	);
+}

msw/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+// const nextConfig = {};
+
+// export default nextConfig;