feat: Migrate into Next.js App Router

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: ["next/core-web-vitals", "prettier"],
+  plugins: ["chakra-ui"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+    tsconfigRootDir: __dirname,
+  },
+  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",
+  },
+  ignorePatterns: [".eslintrc.js"],
+};

.github/workflows/ci.yml

@@ -39,7 +39,6 @@ jobs:
       - name: Run build
         run: |
           yarn build
-          yarn export
         env:
           NEXT_PUBLIC_BASE_URL: ${{ secrets.BASE_URL }}
           NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.GOOGLE_ANALYTICS_ID }}

next.config.js

@@ -0,0 +1,10 @@
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: "export",
+};
+
+module.exports = nextConfig;

package.json

@@ -6,7 +6,6 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "export": "next export",
     "lint:code": "next lint",
     "lint:code:fix": "next lint --fix",
     "lint:style": "stylelint 'src/**/*.{css,scss}'",
@@ -44,6 +43,7 @@
     "@types/node": "^18.11.10",
     "@types/react": "^18.2.21",
     "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/parser": "^6.7.5",
     "@vitejs/plugin-react": "^3.1.0",
     "eslint": "8.37.0",
     "eslint-config-next": "13.5.3",

src/app/blog/[id]/page.tsx

@@ -0,0 +1,16 @@
+import { BlogInfo, BlogInfos, getAllBlogInfos, getBlogFromId } from "../../lib/blog-fetch";
+import { Metadata } from "next";
+import { Post } from "./post";
+
+export async function generateMetadata({ params }: { params: BlogInfo }): Promise<Metadata> {
+  const { title } = await getBlogFromId(params.id);
+  return { title };
+}
+
+export default async function Page({ params }: { params?: BlogInfo }) {
+  if (params == null) {
+    throw new Error("invalid params");
+  }
+  const post = await getBlogFromId(params.id);
+  return <Post post={post} />;
+}

src/pages/blog/[id].tsx → src/app/blog/[id]/post.tsx

@@ -1,8 +1,8 @@
-import { Blog, BlogInfo, getAllBlogInfos, getBlogFromId } from "../../lib/blog-fetch";
+"use client";
+
 import { Container, Heading, Link, Text, VStack } from "@chakra-ui/react";
-import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
+import { Blog } from "../../lib/blog-fetch";
 import { DateString } from "../../components/date";
-import { Layout } from "../../components/layout";
 import MarkdownIt from "markdown-it";
 import MarkdownItFootnote from "markdown-it-footnote";
 import MarkdownItFrontMatter from "markdown-it-front-matter";
@@ -17,11 +17,11 @@ const md = MarkdownIt({
   .use(MarkdownItFrontMatter)
   .use(MarkdownItFootnote);
 
-type BlogPostPageProps = {
+export type BlogPostPageProps = {
   post: Blog;
 };
 
-const BlogPostPage: NextPage<BlogPostPageProps> = ({ post }) => {
+export const Post = ({ post }: BlogPostPageProps) => {
   const prevNext = (
     <PrevNextLink
       prevLinkHref={post.prevId !== "" ? post.prevId : null}
@@ -30,7 +30,7 @@ const BlogPostPage: NextPage<BlogPostPageProps> = ({ post }) => {
   );
   const bodyHtml = md.render(emojify`${post.content}`);
   return (
-    <Layout pageName={`限界開発鯖 - ブログ - ${post.title}`}>
+    <>
       <VStack>
         <Heading m={8} textAlign="center">
           {post.title}
@@ -48,26 +48,6 @@ const BlogPostPage: NextPage<BlogPostPageProps> = ({ post }) => {
         <div dangerouslySetInnerHTML={{ __html: bodyHtml }} />
       </Container>
       {prevNext}
-    </Layout>
+    </>
   );
 };
-
-export const getStaticProps: GetStaticProps<BlogPostPageProps, BlogInfo> = async ({ params }) => {
-  if (params == null) {
-    throw new Error("invalid params");
-  }
-  console.dir(params);
-  const post = await getBlogFromId(params.id);
-  return {
-    props: {
-      post,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths<BlogInfo> = async () => {
-  const paths = await getAllBlogInfos();
-  return { paths, fallback: false };
-};
-
-export default BlogPostPage;

src/pages/blog.tsx → src/app/blog/blog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Avatar,
   Button,
@@ -9,17 +10,20 @@ import {
   Spacer,
   VStack,
 } from "@chakra-ui/react";
-import type { GetStaticProps, NextPage } from "next";
-import { Metadata, getSortedBlogMetadata } from "../lib/blog-fetch";
 import { DateString } from "../components/date";
-import { Layout } from "../components/layout";
+import { Metadata } from "../lib/blog-fetch";
 import NextLink from "next/link";
-import { Title } from "../components/title";
+import { Metadata as NextMetadata } from "next";
+import type { NextPage } from "next";
+
+export const metadata: NextMetadata = {
+  title: "限界開発鯖 - ブログ",
+};
 
 const BlogCard = ({ id, title, date, author, authorId }: Metadata): JSX.Element => (
   <HStack borderColor="shadowed" borderRightWidth="1px" borderBottomWidth="2px">
     <NextLink href={`/blog/${id}`} passHref>
-      <Avatar as="a" flex="0 0 sm" name={title} />
+      <Avatar flex="0 0 sm" name={title} />
     </NextLink>
     <VStack alignItems="self-start" flex="1 1" p={2} spacing="0.5">
       <NextLink href={`/blog/${id}`} passHref>
@@ -32,29 +36,17 @@ const BlogCard = ({ id, title, date, author, authorId }: Metadata): JSX.Element
         <DateString dateString={date} />
         <Spacer />
         <NextLink href={`/blog/${id}`} passHref>
-          <Button as="a" size="sm">
-            記事を読む &rarr;
-          </Button>
+          <Button size="sm">記事を読む &rarr;</Button>
         </NextLink>
       </Flex>
     </VStack>
   </HStack>
 );
 
-const BlogPage: NextPage<{ blogs: Metadata[] }> = ({ blogs }) => (
-  <Layout pageName="限界開発鯖 - ブログ">
-    <Title>ブログ</Title>
-    <SimpleGrid gap={4} columns={1}>
-      {blogs.map((blog) => (
-        <BlogCard key={blog.id} {...blog} />
-      ))}
-    </SimpleGrid>
-  </Layout>
+export const Blog: NextPage<{ blogs: Metadata[] }> = ({ blogs }) => (
+  <SimpleGrid gap={4} columns={1}>
+    {blogs.map((blog) => (
+      <BlogCard key={blog.id} {...blog} />
+    ))}
+  </SimpleGrid>
 );
-
-export const getStaticProps: GetStaticProps = async () => {
-  const blogs = await getSortedBlogMetadata();
-  return { props: { blogs } };
-};
-
-export default BlogPage;

src/app/blog/page.tsx

@@ -0,0 +1,11 @@
+import { BlogInfos, getAllBlogInfos, getSortedBlogMetadata } from "../lib/blog-fetch";
+import { Blog } from "./blog";
+
+export async function generateStaticParams(): Promise<BlogInfos> {
+  return getAllBlogInfos();
+}
+
+export default async function Page() {
+  const blogs = await getSortedBlogMetadata();
+  return <Blog blogs={blogs} />;
+}

src/components/date.test.tsx → src/app/components/date.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { DateString } from "./date";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<DateString dateString="2021-01-01" />);

src/components/footer.test.tsx → src/app/components/footer.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Footer } from "./footer";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Footer />);

src/components/footer.tsx → src/app/components/footer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Box, Link } from "@chakra-ui/react";
 
 import NextLink from "next/link";

src/app/components/google-analytics.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import Script from "next/script";
+import { useEffect } from "react";
+
+export const GOOGLE_ANALYTICS_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ?? "";
+
+const notifyShowingPage = (url: string): void => {
+  (
+    window as unknown as { gtag(event: "config", id: string, options: { page_path: string }): void }
+  ).gtag("config", GOOGLE_ANALYTICS_ID, {
+    page_path: url,
+  });
+};
+
+type Event = {
+  action: string;
+  category: string;
+  label: string;
+  value?: string;
+};
+
+const event = ({ action, category, label, value }: Event): void => {
+  (
+    window as unknown as {
+      gtag(
+        event: "event",
+        id: string,
+        options: { event_category: string; event_label: string; value?: string },
+      ): void;
+    }
+  ).gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};
+
+export const GoogleAnalytics = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    notifyShowingPage(`${pathname}?${searchParams}`);
+  }, [pathname, searchParams]);
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
+      />
+      <Script strategy="afterInteractive" id="send-ga">
+        {`
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
+  gtag("config", "${GOOGLE_ANALYTICS_ID}", {
+    page_path: window.location.pathname,
+  });
+`}
+      </Script>
+    </>
+  );
+};

src/components/header.test.tsx → src/app/components/header.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Header } from "./header";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Header />);

src/components/navigation.test.tsx → src/app/components/navigation.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Navigation } from "./navigation";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(

src/components/navigation.tsx → src/app/components/navigation.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Button,
   Container,

src/components/prev-next-link.test.tsx → src/app/components/prev-next-link.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { PrevNextLink } from "./prev-next-link";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders both prev and next correctly", () => {
   const tree = render(

src/components/questions.test.tsx → src/app/components/questions.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Questions } from "./questions";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Questions />);

src/components/sns-link.test.tsx → src/app/components/sns-link.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { SNSLink } from "./sns-link";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders twitter link correctly", () => {
   const tree = render(<SNSLink type="twitter" url="https://twitter.com/MikurXina" />);

src/components/title.test.tsx → src/app/components/title.test.tsx

@@ -1,6 +1,6 @@
 import { Subtitle, Title } from "./title";
 import { expect, it } from "vitest";
-import { render } from "../utils/react-test";
+import { render } from "../../utils/react-test";
 
 it("renders title correctly", () => {
   const tree = render(<Title>Epic Title</Title>);

src/app/fonts.ts

@@ -0,0 +1,6 @@
+import { Roboto } from "next/font/google";
+
+export const roboto = Roboto({
+  weight: "400",
+  subsets: ["latin"],
+});