fix: issues with blank screen on prod builds

Author: kespinola

next.config.js

@@ -2,6 +2,15 @@
 const withGraphql = require("next-plugin-graphql");
 
 const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/drips",
+        permanent: true,
+      },
+    ];
+  },
   images: {
     remotePatterns: [
       {

package-lock.json

@@ -37,17 +37,17 @@
     "http-proxy": "^1.18.1",
     "install": "^0.13.0",
     "micro": "^10.0.1",
-    "next": "^13.3.1",
+    "next": "^13.4.8",
     "next-auth": "^4.19.2",
     "next-plugin-graphql": "^0.0.2",
     "npm": "^9.6.1",
     "prisma": "^4.9.0",
     "ramda": "^0.28.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "^4.9.5",
+    "react-spinners": "^0.13.8",
     "ts-node": "^10.9.1",
-    "react-spinners": "^0.13.8"
+    "typescript": "^4.9.5"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.16.4",

package.json

@@ -0,0 +1,29 @@
+"use client";
+import { usePathname } from "next/navigation";
+import Hero from "@/components/Hero";
+import Tabs from "@/layouts/Tabs";
+
+export default function Home({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      <Hero />
+      <Tabs.Page className="mt-8">
+        <Tabs.Panel>
+          <Tabs.Tab
+            name="Past drips"
+            href="/drips"
+            active={pathname === "/drips"}
+          />
+          <Tabs.Tab
+            name="Your collectibles"
+            href="/collectibles"
+            active={pathname === "/collectibles"}
+          />
+        </Tabs.Panel>
+        <Tabs.Content>{children}</Tabs.Content>
+      </Tabs.Page>
+    </>
+  );
+}

src/app/(home)/Home.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { GetPastDrips } from '@/queries/airdrops.graphql';
 import { useQuery } from '@apollo/client';
-import { Airdrop } from '../../graphql.types';
+import { Airdrop } from '@/graphql.types';
 
 interface GetPastDripsData {
   pastDrips: [Airdrop];

src/app/(main)/Drips.tsx

@@ -1,9 +1,9 @@
-import Home from './Home';
+import Drips from './Drips';
 
 export default async function HomeLayout({
   children
 }: {
   children: React.ReactNode;
 }) {
-  return <Home>{children}</Home>;
+  return <Drips>{children}</Drips>;
 }