feat: Migrate into Next.js App Router (#353)

* Migrate into app router

* Update tsconfig

* Configure export

* Fix lint config

* Move generateStaticParams

* Fix to return correct data

* Add missing peer dependencies

* Remove unused function

* Remove wrong peer

* Remove needless stylelint plugin

* Fix resolving conflict

* Fix title

* Remove passHref

* Wrap GoogleAnalytics with Suspense

.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 }}

.stylelintrc

@@ -1,9 +1,5 @@
 {
-  "extends": [
-    "stylelint-config-sass-guidelines",
-    "stylelint-config-recess-order",
-    "stylelint-config-prettier"
-  ],
+  "extends": ["stylelint-config-sass-guidelines", "stylelint-config-recess-order"],
   "rules": {
     "order/properties-alphabetical-order": null
   }

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",
@@ -60,7 +60,6 @@
     "react-test-renderer": "^18.2.0",
     "sass": "^1.62.1",
     "stylelint": "^15.10.3",
-    "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recess-order": "^4.3.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "ts-node": "^10.9.1",

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

@@ -0,0 +1,20 @@
+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: `ブログ - ${title}` };
+}
+
+export async function generateStaticParams(): Promise<BlogInfos> {
+  return getAllBlogInfos();
+}
+
+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/app/blog/blog.tsx

@@ -0,0 +1,50 @@
+"use client";
+import {
+  Avatar,
+  Button,
+  Flex,
+  HStack,
+  Heading,
+  Link,
+  SimpleGrid,
+  Spacer,
+  VStack,
+} from "@chakra-ui/react";
+import { DateString } from "../components/date";
+import { Metadata } from "../lib/blog-fetch";
+import NextLink from "next/link";
+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">
+    <Avatar as={NextLink} flex="0 0 sm" href={`/blog/${id}`} name={title} />
+    <VStack alignItems="self-start" flex="1 1" p={2} spacing="0.5">
+      <NextLink href={`/blog/${id}`}>
+        <Heading as="h3" fontSize="lg">
+          {title}
+        </Heading>
+      </NextLink>
+      <Flex align="self-end" wrap="wrap" gap={2} w="100%">
+        <Link href={`https://github.com/${authorId}`}>{author}</Link>
+        <DateString dateString={date} />
+        <Spacer />
+        <Button as={NextLink} href={`/blog/${id}`} size="sm">
+          記事を読む &rarr;
+        </Button>
+      </Flex>
+    </VStack>
+  </HStack>
+);
+
+export const Blog: NextPage<{ blogs: Metadata[] }> = ({ blogs }) => (
+  <SimpleGrid gap={4} columns={1}>
+    {blogs.map((blog) => (
+      <BlogCard key={blog.id} {...blog} />
+    ))}
+  </SimpleGrid>
+);

src/app/blog/page.tsx

@@ -0,0 +1,7 @@
+import { Blog } from "./blog";
+import { getSortedBlogMetadata } from "../lib/blog-fetch";
+
+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";
@@ -8,11 +10,9 @@ export const Footer = (): JSX.Element => {
   const year = useContext(yearContext);
   return (
     <Box as="footer" p={4} textAlign="center" borderColor="shadowed" borderTopWidth="2px">
-      <NextLink href="/policy" passHref legacyBehavior>
-        <Link mr={2} color="highlighted" fontStyle="normal">
-          プライバシーポリシー
-        </Link>
-      </NextLink>
+      <Link as={NextLink} mr={2} color="highlighted" fontStyle="normal" href="/policy">
+        プライバシーポリシー
+      </Link>
       - (c) {year} Approvers
     </Box>
   );

src/app/components/google-analytics.tsx

@@ -0,0 +1,43 @@
+"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,
+  });
+};
+
+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/app/components/header.tsx

@@ -0,0 +1,18 @@
+import { Avatar, Center, Flex, Heading } from "@chakra-ui/react";
+import NextLink from "next/link";
+
+export const Header = (): JSX.Element => (
+  <Center as="header" w="100%" p={4} borderColor="shadowed" borderBottomWidth="2px">
+    <Flex as={NextLink} align="center" href="/">
+      <Avatar
+        w={8}
+        h={8}
+        mr={2}
+        borderRadius="37%"
+        name="Approversロゴ"
+        src="/android-chrome-192x192.png"
+      />
+      <Heading as="span">Approvers</Heading>
+    </Flex>
+  </Center>
+);

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,
@@ -29,11 +31,9 @@ const Links = ({ links }: LinksProps): JSX.Element => (
   <VStack>
     {links.map(({ name, url }) => (
       <Container key={name}>
-        <NextLink href={url} passHref>
-          <Button as="a" minW="100%">
-            {name}
-          </Button>
-        </NextLink>
+        <Button as={NextLink} minW="100%" href={url}>
+          {name}
+        </Button>
       </Container>
     ))}
   </VStack>

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(