switch to next.js

- init next app
- add daisyUI

client/.gitignore

@@ -1,9 +1,36 @@
-.cache
-.vercel
-.output
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-/build/
-/public/build
-/api/index.js
-/api/index.js.map
-/app/styles/app.css
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

client/README.md

@@ -1,34 +0,0 @@
-# Welcome to Remix!
-
-- [Remix Docs](https://remix.run/docs)
-
-## Deployment
-
-After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
-
-If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
-
-```sh
-npm i -g vercel
-vercel
-```
-
-It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
-
-## Development
-
-To run your Remix app locally, make sure your project's local dependencies are installed:
-
-```sh
-npm install
-```
-
-Afterwards, start the Remix development server like so:
-
-```sh
-npm run dev
-```
-
-Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
-
-If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

client/app/components/Footer.tsx

@@ -1,4 +0,0 @@
-const Footer = () => {
-  return <div>Footer</div>;
-};
-export default Footer;

client/app/components/Header.tsx

@@ -1,44 +0,0 @@
-import { Link } from "@remix-run/react";
-
-const Header = () => {
-  return (
-    <header className="relative flex flex-col items-start justify-between bg-slate-700 sm:flex-row sm:items-center">
-      <h1 className="z-10 m-2.5 text-2xl">chessu</h1>
-      <input className="peer" type="checkbox" id="menu" hidden />
-      <label
-        htmlFor="menu"
-        className="absolute right-0 p-5 sm:hidden peer-checked:[&_div:first-child]:translate-y-1.5 peer-checked:[&_div:first-child]:rotate-45 peer-checked:[&_div:last-child]:-translate-y-1 peer-checked:[&_div:last-child]:-rotate-45"
-      >
-        <div
-          aria-hidden="true"
-          className="m-auto h-0.5 w-6 rounded bg-blue-500 transition duration-300"
-        ></div>
-        <div
-          aria-hidden="true"
-          className="m-auto mt-2 h-0.5 w-6 rounded bg-blue-500 transition duration-300"
-        ></div>
-      </label>
-      <div className="fixed flex h-full w-[calc(100%-4rem)] translate-x-[-100%] flex-col items-center bg-inherit pt-16 shadow-lg transition duration-300 peer-checked:translate-x-0 sm:static sm:flex sm:w-auto sm:translate-x-0 sm:flex-row sm:bg-inherit sm:pt-0 [&_a]:block [&_a]:text-center hover:[&_a]:bg-blue-500">
-        <nav className="w-full sm:w-auto">
-          <ul className="flex flex-col sm:flex-row">
-            <li>
-              <Link className="p-5" to="/">
-                Play
-              </Link>
-            </li>
-            <li>
-              <Link className="p-5" to="/games">
-                Watch
-              </Link>
-            </li>
-          </ul>
-        </nav>
-        <div className="flex w-full items-center sm:w-auto">
-          <button className="w-full p-5 sm:w-auto">themebtn</button>
-          <button className="w-full p-5 sm:w-auto">Sign in</button>
-        </div>
-      </div>
-    </header>
-  );
-};
-export default Header;

client/app/components/game/Board.tsx

@@ -1,10 +0,0 @@
-import { Chessboard } from "react-chessboard";
-
-const Board = () => {
-  return (
-    <div>
-      <Chessboard />
-    </div>
-  );
-};
-export default Board;

client/app/entry.client.tsx

@@ -1,22 +0,0 @@
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-
-function hydrate() {
-  startTransition(() => {
-    hydrateRoot(
-      document,
-      <StrictMode>
-        <RemixBrowser />
-      </StrictMode>
-    );
-  });
-}
-
-if (typeof requestIdleCallback === "function") {
-  requestIdleCallback(hydrate);
-} else {
-  // Safari doesn't support requestIdleCallback
-  // https://caniuse.com/requestidlecallback
-  setTimeout(hydrate, 1);
-}

client/app/entry.server.tsx

@@ -1,21 +0,0 @@
-import type { EntryContext } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response("<!DOCTYPE html>" + markup, {
-    headers: responseHeaders,
-    status: responseStatusCode,
-  });
-}

client/app/root.tsx

@@ -1,34 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
-
-import Header from "./components/Header";
-import Footer from "./components/Footer";
-
-// Tailwind CSS
-import styles from "./styles/app.css";
-export const links = () => [{ rel: "stylesheet", href: styles }];
-
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Chessu",
-  viewport: "width=device-width,initial-scale=1"
-});
-
-export default function App() {
-  return (
-    <html lang="en">
-      <head>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Header />
-        <Outlet />
-        <Footer />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
-      </body>
-    </html>
-  );
-}

client/app/routes/index.tsx

@@ -1,3 +0,0 @@
-export default function Index() {
-  return <div>Index</div>;
-}

client/next.config.js

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

client/package.json

@@ -1,33 +1,31 @@
 {
     "name": "@chessu/client",
+    "version": "0.0.0",
     "private": true,
-    "sideEffects": false,
     "scripts": {
-        "build": "npm run build:css && remix build",
-        "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
-        "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
-        "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
-        "typecheck": "tsc"
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
     },
     "dependencies": {
-        "@remix-run/node": "^1.12.0",
-        "@remix-run/react": "^1.12.0",
-        "@remix-run/vercel": "^1.12.0",
-        "@vercel/node": "^2.9.0",
+        "@next/font": "13.1.6",
         "chess.js": "^1.0.0-beta.3",
-        "react": "^18.2.0",
+        "next": "13.1.6",
+        "react": "18.2.0",
         "react-chessboard": "^2.0.8",
-        "react-dom": "^18.2.0",
-        "remix-utils": "^6.0.0",
-        "socket.io-client": "^4.5.4"
+        "react-dom": "18.2.0",
+        "socket.io-client": "^4.6.0"
     },
     "devDependencies": {
         "@chessu/types": "*",
-        "@remix-run/dev": "^1.12.0",
-        "@remix-run/serve": "^1.12.0",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
-        "tailwindcss": "^3.2.4",
-        "typescript": "^4.9.5"
+        "@types/node": "18.13.0",
+        "@types/react": "18.0.28",
+        "@types/react-dom": "18.0.10",
+        "autoprefixer": "^10.4.13",
+        "daisyui": "^2.50.0",
+        "postcss": "^8.4.21",
+        "tailwindcss": "^3.2.6",
+        "typescript": "4.9.5"
     }
 }

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

client/remix.config.js

@@ -1,13 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-    serverBuildTarget: "vercel",
-    // When running locally in development mode, we use the built in remix
-    // server. This does not understand the vercel lambda module format,
-    // so we default back to the standard build output.
-    server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
-    ignoredRouteFiles: ["**/.*"]
-    // appDirectory: "app",
-    // assetsBuildDirectory: "public/build",
-    // serverBuildPath: "api/index.js",
-    // publicPath: "/build/",
-};

client/remix.env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />

client/server.js

@@ -1,4 +0,0 @@
-import { createRequestHandler } from "@remix-run/vercel";
-import * as build from "@remix-run/dev/server-build";
-
-export default createRequestHandler({ build, mode: process.env.NODE_ENV });

client/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} />;
+}

client/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>
+  );
+}

client/src/pages/api/hello.ts

@@ -0,0 +1,10 @@
+// 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" });
+}

client/src/pages/index.tsx

@@ -0,0 +1,5 @@
+const index = () => {
+  return <div>index</div>;
+};
+
+export default index;

client/tailwind.config.js

@@ -1,8 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ["./app/**/*.{js,ts,jsx,tsx}"],
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
         extend: {}
     },
-    plugins: []
+    plugins: [require("daisyui")],
+    daisyui: {
+        themes: ["cmyk", "night"],
+        darkTheme: "night"
+    }
 };

client/tsconfig.json

@@ -1,22 +1,24 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "target": "ES2019",
-    "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
     },
-
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  }
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
 }