Merge pull request #15 from osgsm/app-router

Migrate to App Router
osgsm · May 19, 2023 · f4a86e0 · f4a86e0 · vercel · May 19, 2023
2 parents 09e161d + 5f1907e
commit f4a86e0
Show file tree

Hide file tree

Showing 13 changed files with 271 additions and 317 deletions.
diff --git a/pages/about.js → app/about/page.js b/pages/about.js → app/about/page.js
@@ -1,20 +1,28 @@
 import Head from 'next/head';
 import { AiFillGithub, AiOutlineTwitter } from 'react-icons/ai';
 import { HiArrowUpRight } from 'react-icons/hi2';
-import Layout, { siteTitle } from '../components/layout';
-import Timeline from '../components/timeline';
-import timelineContents from '../content/aboutTimelineContents';
+import Timeline from '../../components/timeline';
+import timelineContents from '../../content/aboutTimelineContents';
+
+export const metadata = {
+  title: 'About',
+  openGraph: {
+    title: "About — osgsm's personal website",
+    url: 'https://osgsm.io/about',
+    type: 'website',
+  },
+  twitter: {
+    title: "About — osgsm's personal website",
+    card: 'summary_large_image',
+  },
+};
 
 const About = () => {
   return (
-    <Layout>
+    <>
       <Head>
-        <title>私について｜{siteTitle}</title>
-        <meta
-          name="og:title"
-          content={`私について｜${siteTitle}`}
-          key="og-title"
-        />
+        <title>私について</title>
+        <meta name="og:title" content="私について" key="og-title" />
       </Head>
       <div className="prose mt-16">
         <h1 className="text-3xl">About</h1>
@@ -68,7 +76,7 @@ const About = () => {
           );
         })}
       </div>
-    </Layout>
+    </>
   );
 };
 

diff --git a/app/layout.js b/app/layout.js
@@ -0,0 +1,47 @@
+import Image from 'next/image';
+
+import '../styles/global.css';
+
+export const metadata = {
+  title: {
+    default: "osgsm's personal website",
+    template: "%s | osgsm's personal website",
+  },
+  openGraph: {
+    title: "osgsm's personal website",
+    url: 'https://osgsm.io',
+    images: '/assets/osgsm-banner.png',
+    type: 'website',
+  },
+  twitter: {
+    title: "osgsm's personal website",
+    card: 'summary_large_image',
+  },
+};
+
+const RootLayout = ({ children }) => {
+  return (
+    <html lang="ja">
+      <body>
+        <div className="mx-auto mt-12 mb-16 max-w-2xl px-4 md:px-6">
+          <header className="flex flex-col items-center">
+            <>
+              <Image
+                priority
+                src="/assets/profile.png"
+                className="rounded-full"
+                height={108}
+                width={108}
+                alt=""
+              />
+              <h1 className="mt-2 text-xl">osgsm</h1>
+            </>
+          </header>
+          <main>{children}</main>
+        </div>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/app/not-found.js b/app/not-found.js
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+const NotFound = () => {
+  return (
+    <>
+      <h1 className="mt-12 text-3xl">Not Found</h1>
+      <p className="mt-4">リクエストされたページが見つかりません</p>
+      <div className="mt-6">
+        <Link
+          className="inline-block rounded-md border border-gray-300
+            bg-gray-100 p-3 text-sm text-gray-700
+            hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800"
+          href="/"
+        >
+          ホームにもどる
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default NotFound;
diff --git a/pages/index.js → app/page.js b/pages/index.js → app/page.js
@@ -1,24 +1,11 @@
-import Head from 'next/head';
 import Link from 'next/link';
 import Date from '../components/date';
-import Layout, { siteTitle } from '../components/layout';
 import { getSortedPostsData } from '../lib/posts';
 
-export const getStaticProps = async () => {
+const Home = () => {
   const allPostsData = getSortedPostsData();
-  return {
-    props: {
-      allPostsData,
-    },
-  };
-};
-
-const Home = ({ allPostsData }) => {
   return (
-    <Layout home>
-      <Head>
-        <title>{siteTitle}</title>
-      </Head>
+    <>
       <section>
         <div className="prose mt-16">
           <p className="mb-2">
@@ -50,7 +37,7 @@ const Home = ({ allPostsData }) => {
           ))}
         </ul>
       </section>
-    </Layout>
+    </>
   );
 };
 

diff --git a/pages/posts/[id].js → app/posts/[id]/page.js b/pages/posts/[id].js → app/posts/[id]/page.js
@@ -1,32 +1,34 @@
-import Date from '../../components/date';
-import Layout from '../../components/layout';
-import Head from 'next/head';
-import { getAllPostIds, getPostData } from '../../lib/posts';
+import Date from '../../../components/date';
+import { getAllPostIds, getPostData } from '../../../lib/posts';
 
-export const getStaticPaths = async () => {
-  const paths = getAllPostIds();
-  return {
-    paths,
-    fallback: false,
-  };
-};
-
-export const getStaticProps = async ({ params }) => {
+export const generateMetadata = async ({ params }) => {
   const postData = await getPostData(params.id);
+  const { id, title } = postData;
+
   return {
-    props: {
-      postData,
+    title,
+    openGraph: {
+      title,
+      type: 'article',
+      url: `http://osgsm.io/posts/${id}`,
+    },
+    twitter: {
+      title,
+      card: 'summary_large_image',
     },
   };
 };
 
-const Post = ({ postData }) => {
+export const dynamicParams = false;
+
+export const generateStaticParams = async () => {
+  return getAllPostIds();
+};
+
+const Post = async ({ params }) => {
+  const postData = await getPostData(params.id);
   return (
-    <Layout>
-      <Head>
-        <title>{postData.title}</title>
-        <meta name="og:title" content={postData.title} key="og-title" />
-      </Head>
+    <>
       <article
         className="prose mt-12
           grid max-w-none
@@ -53,7 +55,7 @@ const Post = ({ postData }) => {
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
       </article>
-    </Layout>
+    </>
   );
 };
 

diff --git a/components/layout.js b/components/layout.js
diff --git a/lib/posts.js b/lib/posts.js
@@ -43,9 +43,7 @@ export const getAllPostIds = () => {
 
   return fileNames.map((fileName) => {
     return {
-      params: {
-        id: fileName.replace(/\.md$/, ''),
-      },
+      id: fileName.replace(/\.md$/, ''),
     };
   });
 };

diff --git a/package.json b/package.json
@@ -14,10 +14,10 @@
     "@next/font": "13.1.1",
     "date-fns": "^2.29.3",
     "gray-matter": "^4.0.3",
-    "next": "13.1.1",
+    "next": "^13.4.2",
     "next-sitemap": "^3.1.47",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "rehype-pretty-code": "^0.8.1",
     "rehype-stringify": "^9.0.3",
@@ -29,8 +29,8 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.8",
     "autoprefixer": "^10.4.13",
-    "eslint": "8.31.0",
-    "eslint-config-next": "13.1.1",
+    "eslint": "^8.40.0",
+    "eslint-config-next": "^13.4.2",
     "eslint-config-prettier": "^8.6.0",
     "postcss": "^8.4.20",
     "prettier": "^2.8.1",

diff --git a/pages/404.js b/pages/404.js
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_document.js b/pages/_document.js
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
+    './app/**/*.{js,ts,jsx,tsx}',
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
   ],