Optimize package imports and add error pages (#103)

* control

* treeshaking

* optimize packages

* treeshaking

* Update apps/nextjs/src/app/forbidden.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Signed-off-by: Gabe Mendoza <[email protected]>

* unauth page

* lint

---------

Signed-off-by: Gabe Mendoza <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

apps/nextjs/next.config.ts

@@ -11,7 +11,7 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
-export default withBundleAnalyzer({
+const nextConfig: NextConfig = {
   reactStrictMode: true,
   experimental: {
     reactCompiler: true,
@@ -26,6 +26,43 @@ export default withBundleAnalyzer({
     staticGenerationRetryCount: 2,
     staticGenerationMaxConcurrency: 8,
     staticGenerationMinPagesPerWorker: 25,
+    turbo: {
+      treeShaking: true,
+    },
+    webpackMemoryOptimizations: true,
+    optimizePackageImports: [
+      "@battle-stadium/api",
+      "@battle-stadium/auth",
+      "@battle-stadium/db",
+      "@battle-stadium/ui",
+      "@battle-stadium/validators",
+      "@clerk/backend",
+      "@clerk/clerk-react",
+      "@clerk/nextjs",
+      "@trpc/client",
+      "@trpc/react-query",
+      "@trpc/server",
+      "@uploadthing/react",
+      "react-hook-form",
+      "discord-api-types",
+      "discord-interactions",
+      "discord.js",
+      "openapi-fetch",
+      "openapi-typescript-helpers",
+      "pokedex-promise-v2",
+      "@pkmn/sets",
+      "@pkmn/types",
+      "@rails/actioncable",
+      "@vercel/analytics",
+      "@vercel/flags",
+      "@vercel/functions",
+      "@vercel/kv",
+      "@vercel/speed-insights",
+      "@aws-sdk/credential-provider-web-identity",
+      "cookie",
+      "tweetnacl",
+      "zod",
+    ],
   },
 
   expireTime: 3600,
@@ -66,4 +103,6 @@ export default withBundleAnalyzer({
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: false },
   typescript: { ignoreBuildErrors: false },
-} satisfies NextConfig);
+};
+
+export default withBundleAnalyzer(nextConfig);

apps/nextjs/src/app/forbidden.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export default function Forbidden() {
+  return (
+    <main
+      role="main"
+      className="flex min-h-screen flex-col items-center justify-center text-center"
+    >
+      <div className="container mx-auto px-4">
+        <h2>Forbidden</h2>
+        <p>You are not authorized to access this resource.</p>
+        <p className="mt-4 text-sm text-gray-600">
+          If you believe this is an error, please contact support.
+        </p>
+        <Link href="/">Return Home</Link>
+      </div>
+    </main>
+  );
+}

apps/nextjs/src/app/unauthorized.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+
+export default function Unauthorized() {
+  const returnUrl =
+    typeof window !== "undefined" ? window.location.pathname : "";
+  const signInUrl = `/sign-in${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ""}`;
+
+  return (
+    <ErrorPageLayout
+      title="Unauthorized"
+      message="Please log in to access this page."
+      actionLink={{
+        href: signInUrl,
+        text: "Go to Login",
+      }}
+    />
+  );
+}
+
+interface ErrorPageLayoutProps {
+  title: string;
+  message: string;
+  actionLink: {
+    href: string;
+    text: string;
+  };
+  children?: React.ReactNode;
+}
+
+function ErrorPageLayout({
+  title,
+  message,
+  actionLink,
+  children,
+}: ErrorPageLayoutProps) {
+  return (
+    <main
+      role="main"
+      className="flex min-h-screen flex-col items-center justify-center text-center"
+    >
+      <div className="container mx-auto px-4">
+        <h2>{title}</h2>
+        <p>{message}</p>
+        {children}
+        <Link href={actionLink.href}>{actionLink.text}</Link>
+      </div>
+    </main>
+  );
+}

cspell.config.yaml

@@ -36,6 +36,7 @@ dictionaries:
   - markdown
   - lorem-ipsum
 words:
+  - actioncable
   - adbanner
   - adsbygoogle
   - adsense