setup for static export to work with IPFS and fix webpack lib issues

.gitignore

@@ -36,4 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 # enviornment variables
-.env
+.env
+
+# custom output dir
+dist

app/components/SwapboxContainer.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Swapbox } from "@/app/components";
+import { useRouter } from "next/navigation";
+
+export const SwapboxContainer = () => {
+  const router = useRouter();
+
+  return (
+    <div>
+      <div
+        className="flex items-center mb-3 space-x-2"
+        onClick={() => router.back()}
+      >
+        <div className="p-1 rounded-lg bg-stone-800">{"<"}</div>
+        <p className="cursor-pointer hover:underline">Go back</p>
+      </div>
+      <Swapbox />
+    </div>
+  );
+};

app/components/index.ts

@@ -1 +1,2 @@
 export * from "./Swapbox";
+export * from "./SwapboxContainer";

app/questions/[id]/page.tsx

@@ -1,28 +1,23 @@
-"use client";
+import { SwapboxContainer } from "@/app/components";
 
-import { Swapbox } from "@/app/components";
-import { useRouter } from "next/navigation";
+// Return a list of `params` to populate the [slug] dynamic segment
+export async function generateStaticParams() {
+  // will do the fetching here
 
-export default function QuestionPage({
-  params,
-}: {
-  params: { question: string };
-}) {
-  console.log("question:", params.question);
-  const router = useRouter();
+  const ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+
+  return ids.map(id => ({
+    id: id.toString(),
+  }));
+}
+
+export default function QuestionPage({ params }: { params: { id: string } }) {
+  const { id } = params;
+  console.log("id:", id);
 
   return (
     <main className="w-full px-6 mt-12 space-y-12 md:flex md:flex-col md:items-center">
-      <div>
-        <div
-          className="flex items-center mb-3 space-x-2"
-          onClick={() => router.back()}
-        >
-          <div className="p-1 rounded-lg bg-stone-800">{"<"}</div>
-          <p className="cursor-pointer hover:underline">Go back</p>
-        </div>
-        <Swapbox />
-      </div>
+      <SwapboxContainer />
     </main>
   );
 }

next.config.mjs

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
-
+const nextConfig = {
+  distDir: "dist",
+  output: "export",
+  webpack(config) {
+    config.resolve.fallback = { "pino-pretty": false, encoding: false };
+    return config;
+  },
+};
 export default nextConfig;

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "dist/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }