Gatsby への移行

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["next/core-web-vitals", "prettier"],
+  extends: ["prettier"],
   plugins: ["chakra-ui"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -8,7 +8,6 @@ module.exports = {
   },
   rules: {
     "sort-imports": "error",
-    "@next/next/no-img-element": "off",
     "chakra-ui/props-order": "error",
     "chakra-ui/props-shorthand": "error",
     "chakra-ui/require-specific-component": "error",

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
           - stylelint
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
 
       - name: Run ${{ matrix.lint }}
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
 
       - name: Run build

.gitignore

@@ -34,4 +34,7 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
-.vercel
+.vercel
+.cache
+public/~partytown/
+public/page-data/

gatsby-config.ts

@@ -0,0 +1,47 @@
+import type { GatsbyConfig } from "gatsby";
+
+const config: GatsbyConfig = {
+  siteMetadata: {
+    title: `site`,
+    siteUrl: `https://approvers.dev`,
+  },
+  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
+  // If you use VSCode you can also use the GraphQL plugin
+  // Learn more at: https://gatsby.dev/graphql-typegen
+  graphqlTypegen: true,
+  plugins: [
+    "@chakra-ui/gatsby-plugin",
+    "gatsby-plugin-sass",
+    "gatsby-plugin-sitemap",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "public/android-chrome-512x512.png",
+      },
+    },
+    "gatsby-transformer-remark",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "data",
+        path: "./data",
+      },
+      __key: "data",
+    },
+    {
+      resolve: "gatsby-omni-font-loader",
+      options: {
+        enableListener: true,
+        preconnect: [`https://fonts.googleapis.com`, `https://fonts.gstatic.com`],
+        web: [
+          {
+            name: `Roboto`,
+            file: `https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap`,
+          },
+        ],
+      },
+    },
+  ],
+};
+
+export default config;

gatsby-node.ts

@@ -0,0 +1,101 @@
+import { type GatsbyNode, type NodeInput } from "gatsby";
+import { getMembers } from "./src/lib/member-fetch";
+import path from "path";
+
+export const sourceNodes: GatsbyNode["sourceNodes"] = async (api) => {
+  const members = await getMembers();
+  for (const member of members) {
+    const id = api.createNodeId(member.discordId);
+    const node = {
+      ...member,
+      id,
+      _id: member.discordId,
+      parent: null,
+      children: [],
+      internal: {
+        type: "Member",
+        contentDigest: api.createContentDigest(member),
+      },
+    } satisfies NodeInput;
+    api.actions.createNode(node);
+  }
+};
+
+export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] = (api) => {
+  api.actions.createTypes(`
+    enum SNSKind {
+      twitter
+      github
+    }
+    type SNSLinkInfo {
+      type: SNSKind!
+      name: String!
+    }
+    type Member implements Node {
+      username: String!
+      discordId: ID!
+      associatedLinks: [SNSLinkInfo!]!
+    }
+  `);
+};
+
+export const createPages: GatsbyNode["createPages"] = async (api) => {
+  const res = await api.graphql<{
+    allMarkdownRemark: {
+      nodes: {
+        rawMarkdownBody: string;
+        frontmatter: {
+          title: string;
+          author: string;
+          authorId: string;
+          date: string;
+        };
+        parent: {
+          name: string;
+        };
+      }[];
+    };
+  }>(`
+    {
+      allMarkdownRemark(sort: { frontmatter: { date: ASC } }) {
+        nodes {
+          rawMarkdownBody
+          frontmatter {
+            title
+            author
+            authorId
+            date
+          }
+          parent {
+            ... on File {
+              name
+            }
+          }
+        }
+      }
+    }
+  `);
+  if (res.errors) {
+    api.reporter.error("querying markdown pages failed");
+    return;
+  }
+
+  const pages = res.data?.allMarkdownRemark.nodes!;
+  const component = path.resolve("src/templates/blog-post.tsx");
+  for (let i = 0; i < pages.length; ++i) {
+    const slug = path.basename(pages[i].parent.name);
+    const prevSlug = i > 0 ? path.basename(pages[i - 1].parent.name) : null;
+    const nextSlug = i < pages.length - 1 ? path.basename(pages[i + 1].parent.name) : null;
+    api.actions.createPage({
+      path: `/blog/${slug}`,
+      component,
+      context: {
+        slug,
+        content: pages[i].rawMarkdownBody,
+        frontmatter: pages[i].frontmatter,
+        prevSlug,
+        nextSlug,
+      },
+    });
+  }
+};

package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint:code": "next lint",
-    "lint:code:fix": "next lint --fix",
+    "dev": "gatsby develop",
+    "build": "gatsby build",
+    "start": "gatsby serve",
+    "lint:code": "eslint",
+    "lint:code:fix": "eslint --fix",
     "lint:style": "stylelint 'src/**/*.{css,scss}'",
     "lint:style:fix": "stylelint 'src/**/*.{css,scss}' --fix",
     "format": "prettier --check 'src/**/*.{js,ts,jsx,tsx,css,scss}'",
@@ -16,6 +16,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@chakra-ui/gatsby-plugin": "^3.1.3",
     "@chakra-ui/react": "^2.8.0",
     "@chakra-ui/styled-system": "^2.9.1",
     "@chakra-ui/theme-tools": "^2.0.16",
@@ -25,21 +26,25 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@next/bundle-analyzer": "^14.0.4",
     "date-fns": "^3.0.0",
     "framer-motion": "^11.0.0",
+    "gatsby": "^5.13.7",
+    "gatsby-omni-font-loader": "^2.0.2",
+    "gatsby-plugin-manifest": "^5.13.1",
+    "gatsby-plugin-sass": "^6.13.1",
+    "gatsby-plugin-sitemap": "^6.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-transformer-remark": "^6.13.1",
     "gray-matter": "^4.0.2",
     "markdown-it": "^14.0.0",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-front-matter": "^0.2.3",
-    "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yaml": "^2.3.4"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.1.0",
     "@types/markdown-it": "^14.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.21",

public/manifest.webmanifest

@@ -0,0 +1 @@
+{"icons":[{"src":"icons/icon-48x48.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"48x48","type":"image/png"},{"src":"icons/icon-72x72.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"72x72","type":"image/png"},{"src":"icons/icon-96x96.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"96x96","type":"image/png"},{"src":"icons/icon-144x144.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"144x144","type":"image/png"},{"src":"icons/icon-192x192.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"192x192","type":"image/png"},{"src":"icons/icon-256x256.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"256x256","type":"image/png"},{"src":"icons/icon-384x384.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"384x384","type":"image/png"},{"src":"icons/icon-512x512.png?v=3d36871a2852fe966ee689252b18b2f7","sizes":"512x512","type":"image/png"}]}

src/@types/gatsby-import.d.ts

@@ -0,0 +1,9 @@
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+declare module "*.yaml" {
+  const content: { [className: string]: string };
+  export = content;
+}