Migrate to NextJS

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-public
+public
+.next

.eslintrc.cjs

@@ -2,17 +2,10 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
+    "next/core-web-vitals",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-  },
 };

.gitignore

@@ -1,27 +1,39 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.directory
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
-dist
-dist-ssr
-*.local
+# local env files
+.env*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
 
 # fetchable assets
-public/photos
+public/photos

README.md

@@ -1,27 +1,38 @@
-# React + TypeScript + Vite
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Getting Started
 
-Currently, two official plugins are available:
+First, run the development server:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

next.config.mjs

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

package.json

@@ -1,34 +1,32 @@
 {
   "name": "coins",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@react-three/drei": "^9.83.9",
     "@react-three/fiber": "^8.13.0",
+    "next": "13.4.19",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "three": "^0.152.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "three": "0.152.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/three": "^0.152.0",
+    "@types/node": "20.6.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@types/three": "0.152.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
+    "eslint": "8.49.0",
+    "eslint-config-next": "13.4.19",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "node-vibrant": "^3.2.1-alpha.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "5.2.2"
   }
 }

src/App.tsx

@@ -1,7 +0,0 @@
-import { Scene } from "./components/scene";
-
-function App() {
-  return <Scene />;
-}
-
-export default App;

src/components/scene/coin-instances.tsx

@@ -1,6 +1,6 @@
+import { CoinProps } from "@/types/coin";
 import { CoinInstance } from "./coin";
 import { useEffect, useRef } from "react";
-import { CoinProps } from "../../types/coin";
 import { InstancedMesh, Object3D } from "three";
 
 export const CoinInstances = ({

src/components/scene/coin.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { useLoader } from "@react-three/fiber";
-import { CoinProps } from "../../types/coin";
+import { CoinProps } from "@/types/coin";
 
 export const CoinInstance = ({
   size,

src/components/scene/index.tsx

@@ -1,42 +1,13 @@
 import { Canvas, MeshProps } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
 import { Suspense, useEffect, useState } from "react";
-import { CoinProps } from "../../types/coin";
 import { CoinInstances } from "./coin-instances";
+import { CoinProps } from "@/types/coin";
 
 const testCoins = [
-100658,
-1324,
-1376,
-1384,
-1389,
-1390,
-1395,
-1397,
-20700,
-2236,
-25746,
-25766,
-2763,
-4038,
-4039,
-5628,
-573,
-6612,
-664,
-665,
-70547,
-7398,
-861,
-862,
-863,
-864,
-865,
-867,
-868,
-875,
-876,
-879,
+  100658, 1324, 1376, 1384, 1389, 1390, 1395, 1397, 20700, 2236, 25746, 25766,
+  2763, 4038, 4039, 5628, 573, 6612, 664, 665, 70547, 7398, 861, 862, 863, 864,
+  865, 867, 868, 875, 876, 879,
 ];
 
 const CoinHelper = ({ id }: { id: number }) => {
@@ -55,7 +26,7 @@ const CoinHelper = ({ id }: { id: number }) => {
   return <CoinInstances coinProps={coinProps} />;
 };
 
-const LightBulb = (props: Pick<MeshProps, 'position'>) => (
+const LightBulb = (props: Pick<MeshProps, "position">) => (
   <>
     <pointLight castShadow {...props} />
     <mesh {...props}>
@@ -63,13 +34,13 @@ const LightBulb = (props: Pick<MeshProps, 'position'>) => (
       <meshBasicMaterial color={"#ffa"} />
     </mesh>
     <mesh {...props}>
-      <mesh position={[0,0.5,0]}>
-        <boxGeometry args={[2,1.25,2]} />
+      <mesh position={[0, 0.5, 0]}>
+        <boxGeometry args={[2, 1.25, 2]} />
         <meshBasicMaterial color={"#000"} />
       </mesh>
     </mesh>
   </>
-)
+);
 
 export const Scene = () => (
   <Canvas shadows>

src/index.css

@@ -1,7 +0,0 @@
-body {
-  margin: 0;
-}
-
-#root {
-  height: 100vh;
-}

src/main.tsx

@@ -1,10 +0,0 @@
-import "./index.css";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);

src/pages/_app.tsx

@@ -0,0 +1,6 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

src/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}

src/pages/index.tsx

@@ -0,0 +1,18 @@
+import Head from "next/head";
+import { Scene } from "@/components/scene";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Coins</title>
+        <meta name="description" content="My father's coin collection" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main id={"scene-root"}>
+        <Scene />
+      </main>
+    </>
+  );
+}

src/styles/globals.css

@@ -0,0 +1,15 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+#scene-root > div {
+  height: 100vh !important;
+}

src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

tsconfig.json

@@ -1,25 +1,22 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "target": "es6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
     "skipLibCheck": true,
-
-    /* Bundler mode */
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-});