From 1bf9a036a2bc5a340f528884a39cf7a6b440ce19 Mon Sep 17 00:00:00 2001
From: Naoki Ikeguchi <me@s6n.jp>
Date: Sun, 24 Nov 2024 19:40:17 +0900
Subject: [PATCH] feat: Migrate to App Router

---
 app/_components/Avatar.module.css             |  3 +
 .../avatar.tsx => app/_components/Avatar.tsx  |  3 +-
 app/_components/Card.module.css               | 23 +++++
 .../card.tsx => app/_components/Card.tsx      |  4 +-
 app/_components/Divider.module.css            | 23 +++++
 .../_components/Divider.tsx                   |  2 +-
 app/_components/Experience.module.css         | 32 +++++++
 .../_components/Experience.tsx                |  2 +-
 app/_components/History.module.css            |  3 +
 .../_components/History.tsx                   |  6 +-
 .../logo.tsx => app/_components/Logo.tsx      |  4 +-
 app/_components/Menu.module.css               | 14 +++
 .../menu.tsx => app/_components/Menu.tsx      |  2 +-
 app/_components/Menus.module.css              |  7 ++
 .../menus.tsx => app/_components/Menus.tsx    |  4 +-
 app/_components/Sidebar.module.css            |  7 ++
 app/_components/Sidebar.tsx                   | 22 +++++
 app/_components/Tagline.module.css            | 14 +++
 .../_components/Tagline.tsx                   |  6 +-
 .../_components/Taglines.tsx                  |  2 +-
 app/layout.module.css                         | 35 +++++++
 app/layout.tsx                                | 93 +++++++++++++++++++
 app/page.module.css                           |  7 ++
 app/page.tsx                                  | 33 +++++++
 app/styles.css                                |  4 +
 components/atoms/avatar.module.scss           |  3 -
 components/atoms/divider.module.scss          | 23 -----
 components/atoms/experience.module.scss       | 30 ------
 components/atoms/menu.module.scss             | 16 ----
 components/atoms/tagline.module.scss          | 16 ----
 components/molecules/card.module.scss         | 25 -----
 components/molecules/history.module.scss      |  3 -
 components/molecules/menus.module.scss        |  7 --
 components/organisms/sidebar.module.scss      |  7 --
 components/organisms/sidebar.tsx              | 23 -----
 components/templates/main.module.scss         | 35 -------
 components/templates/main.tsx                 | 44 ---------
 next-env.d.ts                                 |  2 +-
 next.config.js                                |  5 -
 next.config.ts                                |  8 ++
 package.json                                  |  1 +
 pages/_app.tsx                                | 34 -------
 pages/_document.tsx                           | 21 -----
 pages/index.module.scss                       |  7 --
 pages/index.tsx                               | 42 ---------
 pnpm-lock.yaml                                |  3 +
 styles/variables.scss                         |  2 -
 tsconfig.json                                 | 24 ++++-
 48 files changed, 370 insertions(+), 366 deletions(-)
 create mode 100644 app/_components/Avatar.module.css
 rename components/atoms/avatar.tsx => app/_components/Avatar.tsx (76%)
 create mode 100644 app/_components/Card.module.css
 rename components/molecules/card.tsx => app/_components/Card.tsx (85%)
 create mode 100644 app/_components/Divider.module.css
 rename components/atoms/divider.tsx => app/_components/Divider.tsx (85%)
 create mode 100644 app/_components/Experience.module.css
 rename components/atoms/experience.tsx => app/_components/Experience.tsx (96%)
 create mode 100644 app/_components/History.module.css
 rename components/molecules/history.tsx => app/_components/History.tsx (93%)
 rename components/atoms/logo.tsx => app/_components/Logo.tsx (62%)
 create mode 100644 app/_components/Menu.module.css
 rename components/atoms/menu.tsx => app/_components/Menu.tsx (92%)
 create mode 100644 app/_components/Menus.module.css
 rename components/molecules/menus.tsx => app/_components/Menus.tsx (85%)
 create mode 100644 app/_components/Sidebar.module.css
 create mode 100644 app/_components/Sidebar.tsx
 create mode 100644 app/_components/Tagline.module.css
 rename components/atoms/tagline.tsx => app/_components/Tagline.tsx (73%)
 rename components/molecules/taglines.tsx => app/_components/Taglines.tsx (89%)
 create mode 100644 app/layout.module.css
 create mode 100644 app/layout.tsx
 create mode 100644 app/page.module.css
 create mode 100644 app/page.tsx
 create mode 100644 app/styles.css
 delete mode 100644 components/atoms/avatar.module.scss
 delete mode 100644 components/atoms/divider.module.scss
 delete mode 100644 components/atoms/experience.module.scss
 delete mode 100644 components/atoms/menu.module.scss
 delete mode 100644 components/atoms/tagline.module.scss
 delete mode 100644 components/molecules/card.module.scss
 delete mode 100644 components/molecules/history.module.scss
 delete mode 100644 components/molecules/menus.module.scss
 delete mode 100644 components/organisms/sidebar.module.scss
 delete mode 100644 components/organisms/sidebar.tsx
 delete mode 100644 components/templates/main.module.scss
 delete mode 100644 components/templates/main.tsx
 delete mode 100644 next.config.js
 create mode 100644 next.config.ts
 delete mode 100644 pages/_app.tsx
 delete mode 100644 pages/_document.tsx
 delete mode 100644 pages/index.module.scss
 delete mode 100644 pages/index.tsx
 delete mode 100644 styles/variables.scss

diff --git a/app/_components/Avatar.module.css b/app/_components/Avatar.module.css
new file mode 100644
index 0000000..c3a9eb1
--- /dev/null
+++ b/app/_components/Avatar.module.css
@@ -0,0 +1,3 @@
+.image {
+  border-radius: 100%;
+}
diff --git a/components/atoms/avatar.tsx b/app/_components/Avatar.tsx
similarity index 76%
rename from components/atoms/avatar.tsx
rename to app/_components/Avatar.tsx
index 07a5b77..c1d8326 100644
--- a/components/atoms/avatar.tsx
+++ b/app/_components/Avatar.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import styles from './avatar.module.scss';
+import styles from './Avatar.module.css';
 
 type Props = {
   url: string;
@@ -8,7 +8,6 @@ type Props = {
 };
 
 const Avatar: FC<Props> = (props) => {
-  // noinspection CheckImageSize
   return <img className={styles.image} src={props.url} alt={props.alt} width="128" height="128" />;
 };
 
diff --git a/app/_components/Card.module.css b/app/_components/Card.module.css
new file mode 100644
index 0000000..e7d4ed0
--- /dev/null
+++ b/app/_components/Card.module.css
@@ -0,0 +1,23 @@
+.wrapper {
+  align-items: center;
+  display: flex;
+}
+
+.caption {
+  margin-left: 22px;
+
+  & > * {
+    display: block;
+  }
+}
+
+.name {
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: bolder;
+}
+
+.summary {
+  color: var(--color-text-secondary);
+  font-weight: bolder;
+}
diff --git a/components/molecules/card.tsx b/app/_components/Card.tsx
similarity index 85%
rename from components/molecules/card.tsx
rename to app/_components/Card.tsx
index cd8a753..0799378 100644
--- a/components/molecules/card.tsx
+++ b/app/_components/Card.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-import Avatar from '../atoms/avatar';
+import Avatar from './Avatar';
 
-import styles from './card.module.scss';
+import styles from './Card.module.css';
 
 type Props = {
   name: string;
diff --git a/app/_components/Divider.module.css b/app/_components/Divider.module.css
new file mode 100644
index 0000000..807a0d6
--- /dev/null
+++ b/app/_components/Divider.module.css
@@ -0,0 +1,23 @@
+.hr {
+  display: flex;
+  align-items: center;
+  margin: 1em 0 1em;
+  border: none;
+
+  &::after {
+    content: "";
+    display: block;
+    border-top: 3px dotted #ddd;
+    background: transparent;
+    width: 100%;
+  }
+}
+
+.label {
+  color: #ccc;
+  font-size: .8em;
+  font-weight: bolder;
+  text-transform: uppercase;
+  margin-right: .5em;
+  flex: 0 0 content;
+}
diff --git a/components/atoms/divider.tsx b/app/_components/Divider.tsx
similarity index 85%
rename from components/atoms/divider.tsx
rename to app/_components/Divider.tsx
index 5ba8367..4ba3b18 100644
--- a/components/atoms/divider.tsx
+++ b/app/_components/Divider.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import styles from './divider.module.scss';
+import styles from './Divider.module.css';
 
 type Props = {
   label?: string;
diff --git a/app/_components/Experience.module.css b/app/_components/Experience.module.css
new file mode 100644
index 0000000..2e5d0ec
--- /dev/null
+++ b/app/_components/Experience.module.css
@@ -0,0 +1,32 @@
+.title {
+  margin-bottom: .2em;
+
+  & > span {
+    display: block;
+  }
+
+  .duration {
+    color: #888;
+    font-size: .8em;
+    text-transform: uppercase;
+  }
+
+  .position {
+    margin-bottom: -0.1em;
+  }
+
+  .at,
+  .as {
+    margin: 0 .5em;
+    font-size: .8em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .name,
+  .type {
+    font-size: .9em;
+  }
+}
diff --git a/components/atoms/experience.tsx b/app/_components/Experience.tsx
similarity index 96%
rename from components/atoms/experience.tsx
rename to app/_components/Experience.tsx
index 973a272..1fa819e 100644
--- a/components/atoms/experience.tsx
+++ b/app/_components/Experience.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { Duration, EmploymentType, YearMonth } from 'wantedly-profile';
 
-import styles from './experience.module.scss';
+import styles from './Experience.module.css';
 
 type Props = {
   name: string;
diff --git a/app/_components/History.module.css b/app/_components/History.module.css
new file mode 100644
index 0000000..3f63b6f
--- /dev/null
+++ b/app/_components/History.module.css
@@ -0,0 +1,3 @@
+.experience {
+  margin: .5em 0 1em;
+}
diff --git a/components/molecules/history.tsx b/app/_components/History.tsx
similarity index 93%
rename from components/molecules/history.tsx
rename to app/_components/History.tsx
index 174eb3d..b779373 100644
--- a/components/molecules/history.tsx
+++ b/app/_components/History.tsx
@@ -7,10 +7,10 @@ import type {
   WorkExperience,
 } from 'wantedly-profile';
 
-import Divider from '../atoms/divider';
-import Experience from '../atoms/experience';
+import Divider from './Divider';
+import Experience from './Experience';
 
-import styles from './history.module.scss';
+import styles from './History.module.css';
 
 const Section: FC<{ section: LifeStoryChapterSection<ExperienceType> }> = ({ section }) => {
   if (section.experienceType === 'EDUCATION') {
diff --git a/components/atoms/logo.tsx b/app/_components/Logo.tsx
similarity index 62%
rename from components/atoms/logo.tsx
rename to app/_components/Logo.tsx
index 8f2cd93..ac48f18 100644
--- a/components/atoms/logo.tsx
+++ b/app/_components/Logo.tsx
@@ -1,6 +1,6 @@
-import type React from 'react';
+import type { FC } from 'react';
 
-const Logo: React.FC = () => {
+const Logo: FC = () => {
   return <img src="/images/logo.svg" alt="s6n.jp" width="165" height="58" />;
 };
 
diff --git a/app/_components/Menu.module.css b/app/_components/Menu.module.css
new file mode 100644
index 0000000..d91520e
--- /dev/null
+++ b/app/_components/Menu.module.css
@@ -0,0 +1,14 @@
+.link {
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 29px;
+  text-decoration: none;
+}
+
+.isColored {
+  color: #fe3a7c;
+  background: linear-gradient(45deg, #fe3a7c, #ffa900);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/components/atoms/menu.tsx b/app/_components/Menu.tsx
similarity index 92%
rename from components/atoms/menu.tsx
rename to app/_components/Menu.tsx
index 4b1b0a8..3083255 100644
--- a/components/atoms/menu.tsx
+++ b/app/_components/Menu.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { Outfit } from 'next/font/google';
 import type React from 'react';
 
-import styles from './menu.module.scss';
+import styles from './Menu.module.css';
 
 const outfit = Outfit({
   subsets: ['latin'],
diff --git a/app/_components/Menus.module.css b/app/_components/Menus.module.css
new file mode 100644
index 0000000..c230c59
--- /dev/null
+++ b/app/_components/Menus.module.css
@@ -0,0 +1,7 @@
+.navi {
+  margin-bottom: 26px;
+}
+
+.item {
+  margin-right: 24px;
+}
diff --git a/components/molecules/menus.tsx b/app/_components/Menus.tsx
similarity index 85%
rename from components/molecules/menus.tsx
rename to app/_components/Menus.tsx
index e455960..ddd8de6 100644
--- a/components/molecules/menus.tsx
+++ b/app/_components/Menus.tsx
@@ -1,8 +1,8 @@
 import type React from 'react';
 
-import Menu from '../atoms/menu';
+import Menu from './Menu';
 
-import styles from './menus.module.scss';
+import styles from './Menus.module.css';
 
 export type MenuItem = {
   text: string;
diff --git a/app/_components/Sidebar.module.css b/app/_components/Sidebar.module.css
new file mode 100644
index 0000000..1c75568
--- /dev/null
+++ b/app/_components/Sidebar.module.css
@@ -0,0 +1,7 @@
+.sidebar {
+  padding: 100px 62px;
+}
+
+.taglines {
+  margin-top: 32px;
+}
diff --git a/app/_components/Sidebar.tsx b/app/_components/Sidebar.tsx
new file mode 100644
index 0000000..82def0b
--- /dev/null
+++ b/app/_components/Sidebar.tsx
@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import type React from 'react';
+
+import Logo from './Logo';
+import Taglines from './Taglines';
+
+import styles from './Sidebar.module.css';
+
+type Props = {
+  className?: string;
+};
+
+const Sidebar: React.FC<Props> = (props) => {
+  return (
+    <header className={clsx(styles.sidebar, props.className)}>
+      <Logo />
+      <Taglines className={styles.taglines} texts={['engineering', 'behind', 'our', 'web.']} />
+    </header>
+  );
+};
+
+export default Sidebar;
diff --git a/app/_components/Tagline.module.css b/app/_components/Tagline.module.css
new file mode 100644
index 0000000..add3282
--- /dev/null
+++ b/app/_components/Tagline.module.css
@@ -0,0 +1,14 @@
+.tagline {
+  display: block;
+  color: var(--color-text-primary);
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 44px;
+}
+
+.isColored {
+  color: #fe3a7c;
+  background: linear-gradient(45deg, #fe3a7c, #ffa900);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/components/atoms/tagline.tsx b/app/_components/Tagline.tsx
similarity index 73%
rename from components/atoms/tagline.tsx
rename to app/_components/Tagline.tsx
index 29bdde7..9135062 100644
--- a/components/atoms/tagline.tsx
+++ b/app/_components/Tagline.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { Outfit } from 'next/font/google';
-import type React from 'react';
+import type { FC } from 'react';
 
-import styles from './tagline.module.scss';
+import styles from './Tagline.module.css';
 
 const outfit = Outfit({
   subsets: ['latin'],
@@ -13,7 +13,7 @@ type Props = {
   colored: boolean;
 };
 
-const Tagline: React.FC<Props> = (props) => {
+const Tagline: FC<Props> = (props) => {
   return (
     <span className={clsx(outfit.className, styles.tagline, props.colored && styles.isColored)}>{props.text}</span>
   );
diff --git a/components/molecules/taglines.tsx b/app/_components/Taglines.tsx
similarity index 89%
rename from components/molecules/taglines.tsx
rename to app/_components/Taglines.tsx
index f80937a..0b40b41 100644
--- a/components/molecules/taglines.tsx
+++ b/app/_components/Taglines.tsx
@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import Tagline from '../atoms/tagline';
+import Tagline from './Tagline';
 
 type Props = {
   texts: string[];
diff --git a/app/layout.module.css b/app/layout.module.css
new file mode 100644
index 0000000..52d4ebe
--- /dev/null
+++ b/app/layout.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  margin: 0 auto;
+  max-width: 1200px;
+  max-height: 100vh;
+  padding: 0 44px;
+}
+
+.contents {
+  flex-grow: 1;
+  padding: 100px 62px 0;
+  overflow-y: clip;
+}
+
+.main {
+  height: 100%;
+  padding-bottom: 100px;
+  overflow-y: scroll;
+}
+
+@media (max-width: 1024px) {
+  .wrapper {
+    flex-wrap: wrap;
+  }
+
+  .side {
+    padding: 72px 0 32px;
+  }
+
+  .contents {
+    padding: 50px 0;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..5b2fdac
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,93 @@
+import clsx from 'clsx';
+import type { Metadata, Viewport } from 'next';
+import { Noto_Sans_JP } from 'next/font/google';
+import type { FC, ReactNode } from 'react';
+
+import Menus, { type MenuItem } from './_components/Menus';
+import Sidebar from './_components/Sidebar';
+
+import 'modern-css-reset/dist/reset.min.css';
+import './styles.css';
+import styles from './layout.module.css';
+
+export const metadata: Metadata = {
+  title: 's6n.jp : engineering behind our web.',
+  applicationName: 'application-name',
+  manifest: '/site.webmanifest',
+  icons: {
+    shortcut: '/icons/favicon.ico',
+    icon: [
+      {
+        type: 'image/png',
+        sizes: '32x32',
+        url: '/icons/favicon-32x32.png',
+      },
+      {
+        type: 'image/png',
+        sizes: '16x16',
+        url: '/icons/favicon-16x16.png',
+      },
+    ],
+    apple: {
+      sizes: '180x180',
+      url: '/icons/apple-touch-icon.png',
+    },
+    other: [
+      {
+        rel: 'mask-icon',
+        url: '/icons/safari-pinned-tab.svg',
+        color: '#fe3a7c',
+      },
+    ],
+  },
+  appleWebApp: {
+    title: 's6n.jp',
+  },
+  verification: {
+    me: 'https://mstdn.maud.io/@s6n',
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: '#ffffff',
+};
+
+const notoSans = Noto_Sans_JP({
+  preload: false,
+});
+
+const Items: MenuItem[] = [
+  {
+    text: 'Profile',
+    href: '#profile',
+  },
+  {
+    text: 'History',
+    href: '#history',
+  },
+  {
+    text: 'Contact',
+  },
+];
+
+type Props = {
+  children: ReactNode;
+};
+
+const Layout: FC<Props> = ({ children }) => {
+  return (
+    <html lang="ja">
+      <body>
+        <div className={clsx(notoSans.className, styles.wrapper)}>
+          <Sidebar className={styles.side} />
+          <div className={styles.contents}>
+            <Menus items={Items} />
+            <main className={styles.main}>{children}</main>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+};
+
+export default Layout;
diff --git a/app/page.module.css b/app/page.module.css
new file mode 100644
index 0000000..3f1f287
--- /dev/null
+++ b/app/page.module.css
@@ -0,0 +1,7 @@
+.description {
+  margin-top: 16px;
+}
+
+.section {
+  margin: 1rem 0 2rem;
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..7b30a17
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+import { Client } from 'wantedly-profile';
+
+import Card from './_components/Card';
+import History from './_components/History';
+
+import styles from './page.module.css';
+
+const WANTEDLY_USER_ID = '79008489';
+
+const getUser = async () => {
+  const client = Client.default();
+
+  return await client.fetchUserById(WANTEDLY_USER_ID);
+};
+
+const Page: FC = async () => {
+  const user = await getUser();
+
+  return (
+    <>
+      <section className={styles.section} id="profile">
+        <Card name={user.profile.name} avatarUrl={user.profile.avatarUrl} />
+        <p className={styles.description}>{user.profile.introduction}</p>
+      </section>
+      <section className={styles.section} id="history">
+        <History chapters={user.profile.profilePageLifeStory.chapters} />
+      </section>
+    </>
+  );
+};
+
+export default Page;
diff --git a/app/styles.css b/app/styles.css
new file mode 100644
index 0000000..79e287c
--- /dev/null
+++ b/app/styles.css
@@ -0,0 +1,4 @@
+:root {
+  --color-text-primary: #1d1d1d;
+  --color-text-secondary: #505050;
+}
diff --git a/components/atoms/avatar.module.scss b/components/atoms/avatar.module.scss
deleted file mode 100644
index 5dbccdc..0000000
--- a/components/atoms/avatar.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.image {
-    border-radius: 100%;
-}
diff --git a/components/atoms/divider.module.scss b/components/atoms/divider.module.scss
deleted file mode 100644
index a82e985..0000000
--- a/components/atoms/divider.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.hr {
-    display: flex;
-    align-items: center;
-    margin: 1em 0 1em;
-    border: none;
-
-    &::after {
-        content: '';
-        display: block;
-        border-top: 3px dotted #ddd;
-        background: transparent;
-        width: 100%;
-    }
-}
-
-.label {
-    color: #ccc;
-    font-size: .8em;
-    font-weight: bolder;
-    text-transform: uppercase;
-    margin-right: .5em;
-    flex: 0 0 content;
-}
diff --git a/components/atoms/experience.module.scss b/components/atoms/experience.module.scss
deleted file mode 100644
index 36d432a..0000000
--- a/components/atoms/experience.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.title {
-    margin-bottom: .2em;
-
-    > span {
-        display: block;
-    }
-
-    .duration {
-        color: #888;
-        font-size: .8em;
-        text-transform: uppercase;
-    }
-
-    .position {
-        margin-bottom: -0.1em;
-    }
-
-    .at, .as {
-        margin: 0 .5em;
-        font-size: .8em;
-
-        &:first-child {
-            margin-left: 0;
-        }
-    }
-
-    .name, .type {
-        font-size: .9em;
-    }
-}
diff --git a/components/atoms/menu.module.scss b/components/atoms/menu.module.scss
deleted file mode 100644
index fe9fb77..0000000
--- a/components/atoms/menu.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import 'styles/variables';
-
-.link {
-    color: $color-text-primary;
-    font-size: 24px;
-    font-weight: bold;
-    line-height: 29px;
-    text-decoration: none;
-}
-
-.isColored {
-    color: #fe3a7c;
-    background: linear-gradient(45deg, #fe3a7c, #ffa900);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
diff --git a/components/atoms/tagline.module.scss b/components/atoms/tagline.module.scss
deleted file mode 100644
index 76e588d..0000000
--- a/components/atoms/tagline.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import 'styles/variables';
-
-.tagline {
-    display: block;
-    color: $color-text-primary;
-    font-weight: bold;
-    font-size: 36px;
-    line-height: 44px;
-}
-
-.isColored {
-    color: #fe3a7c;
-    background: linear-gradient(45deg, #fe3a7c, #ffa900);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
diff --git a/components/molecules/card.module.scss b/components/molecules/card.module.scss
deleted file mode 100644
index f00c867..0000000
--- a/components/molecules/card.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import 'styles/variables';
-
-.wrapper {
-    align-items: center;
-    display: flex;
-}
-
-.caption {
-    margin-left: 22px;
-
-    > * {
-        display: block;
-    }
-}
-
-.name {
-    color: $color-text-primary;
-    font-size: 24px;
-    font-weight: bolder;
-}
-
-.summary {
-    color: $color-text-secondary;
-    font-weight: bolder;
-}
diff --git a/components/molecules/history.module.scss b/components/molecules/history.module.scss
deleted file mode 100644
index 77d16a3..0000000
--- a/components/molecules/history.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.experience {
-    margin: .5em 0 1em;
-}
diff --git a/components/molecules/menus.module.scss b/components/molecules/menus.module.scss
deleted file mode 100644
index e545128..0000000
--- a/components/molecules/menus.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.navi {
-    margin-bottom: 26px;
-}
-
-.item {
-    margin-right: 24px;
-}
diff --git a/components/organisms/sidebar.module.scss b/components/organisms/sidebar.module.scss
deleted file mode 100644
index 567bd07..0000000
--- a/components/organisms/sidebar.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.sidebar {
-    padding: 100px 62px;
-}
-
-.taglines {
-    margin-top: 32px;
-}
diff --git a/components/organisms/sidebar.tsx b/components/organisms/sidebar.tsx
deleted file mode 100644
index c196432..0000000
--- a/components/organisms/sidebar.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type React from 'react';
-
-import Logo from '../atoms/logo';
-import Taglines from '../molecules/taglines';
-
-import styles from './sidebar.module.scss';
-
-type Props = {
-  className?: string;
-};
-
-const Sidebar: React.FC<Props> = (props) => {
-  return (
-    <>
-      <header className={`${styles.sidebar} ${props.className}`}>
-        <Logo />
-        <Taglines className={styles.taglines} texts={['engineering', 'behind', 'our', 'web.']} />
-      </header>
-    </>
-  );
-};
-
-export default Sidebar;
diff --git a/components/templates/main.module.scss b/components/templates/main.module.scss
deleted file mode 100644
index 2741610..0000000
--- a/components/templates/main.module.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.wrapper {
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 1;
-    margin: 0 auto;
-    max-width: 1200px;
-    max-height: 100vh;
-    padding: 0 44px;
-}
-
-.contents {
-    flex-grow: 1;
-    padding: 100px 62px 0;
-    overflow-y: clip;
-}
-
-.main {
-    height: 100%;
-    padding-bottom: 100px;
-    overflow-y: scroll;
-}
-
-@media (max-width: 1024px) {
-    .wrapper {
-        flex-wrap: wrap;
-    }
-
-    .side {
-        padding: 72px 0 32px;
-    }
-
-    .contents {
-        padding: 50px 0;
-    }
-}
diff --git a/components/templates/main.tsx b/components/templates/main.tsx
deleted file mode 100644
index c772df0..0000000
--- a/components/templates/main.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import clsx from "clsx";
-import {Noto_Sans_JP} from "next/font/google";
-import type React from 'react';
-
-import Menus, { type MenuItem } from '../molecules/menus';
-import Sidebar from '../organisms/sidebar';
-
-import styles from './main.module.scss';
-
-const notoSans = Noto_Sans_JP({
-  preload: false,
-})
-
-const Items: MenuItem[] = [
-  {
-    text: 'Profile',
-    href: '#profile',
-  },
-  {
-    text: 'History',
-    href: '#history',
-  },
-  {
-    text: 'Contact',
-  },
-];
-
-type Props = {
-  children: React.ReactChild;
-};
-
-const Layout = ({ children }: Props) => {
-  return (
-    <div className={clsx(notoSans.className, styles.wrapper)}>
-      <Sidebar className={styles.side} />
-      <div className={styles.contents}>
-        <Menus items={Items} />
-        <main className={styles.main}>{children}</main>
-      </div>
-    </div>
-  );
-};
-
-export default Layout;
diff --git a/next-env.d.ts b/next-env.d.ts
index a4a7b3f..40c3d68 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index b8ca0d3..0000000
--- a/next.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  output: 'export',
-  reactStrictMode: true,
-  trailingSlash: true,
-};
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..b774ab4
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+
+const config: NextConfig = {
+  reactStrictMode: true,
+  trailingSlash: true,
+};
+
+export default config;
diff --git a/package.json b/package.json
index 5d92d24..f5e2d28 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.81.0",
+    "styled-jsx": "^5.1.6",
     "wantedly-profile": "^0.1.1"
   },
   "devDependencies": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 62cbff9..0000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { AppProps } from 'next/app';
-import Head from 'next/head';
-import type React from 'react';
-
-import Layout from '../components/templates/main';
-
-import 'modern-css-reset/dist/reset.min.css';
-
-const App: React.FC<AppProps> = ({ Component, pageProps }) => {
-  return (
-    <>
-      <Head>
-        <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#fe3a7c" />
-        <link rel="me" href="https://mstdn.maud.io/@s6n" />
-        <link rel="shortcut icon" href="/icons/favicon.ico" />
-        <meta name="apple-mobile-web-app-title" content="s6n.jp" />
-        <meta name="application-name" content="s6n.jp" />
-        <meta name="msapplication-TileColor" content="#fe3a7c" />
-        <meta name="msapplication-config" content="/browserconfig.xml" />
-        <meta name="theme-color" content="#ffffff" />
-        <title>s6n.jp : engineering behind our web.</title>
-      </Head>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </>
-  );
-};
-
-export default App;
diff --git a/pages/_document.tsx b/pages/_document.tsx
deleted file mode 100644
index 233b5ca..0000000
--- a/pages/_document.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { AppInitialProps } from 'next/app';
-import type Document from 'next/document'; // eslint-disable-line @next/next/no-document-import-in-page
-import { Head, Html, Main, NextScript } from 'next/document';
-import type { FC } from 'react';
-
-type DocumentProps = Document & AppInitialProps;
-
-const AppDocument: FC<DocumentProps> = () => {
-  // noinspection HtmlRequiredTitleElement
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-};
-
-export default AppDocument;
diff --git a/pages/index.module.scss b/pages/index.module.scss
deleted file mode 100644
index 11dc0c4..0000000
--- a/pages/index.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.description {
-    margin-top: 16px;
-}
-
-.section {
-    margin: 1rem 0 2rem;
-}
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index 2489b8e..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { GetStaticProps } from 'next';
-import type { FC } from 'react';
-import { Client, type User } from 'wantedly-profile';
-
-import Card from '../components/molecules/card';
-import History from '../components/molecules/history';
-
-import styles from './index.module.scss';
-
-const WANTEDLY_USER_ID = '79008489';
-
-type Props = {
-  user: User<typeof WANTEDLY_USER_ID>;
-};
-
-// noinspection JSUnusedGlobalSymbols
-export const getStaticProps: GetStaticProps<Props> = async () => {
-  const client = Client.default();
-
-  return {
-    props: {
-      user: await client.fetchUserById(WANTEDLY_USER_ID),
-    },
-  };
-};
-
-const Index: FC<Props> = ({ user }) => {
-  return (
-    <>
-      <section className={styles.section} id="profile">
-        <Card name={user.profile.name} avatarUrl={user.profile.avatarUrl} />
-        <p className={styles.description}>{user.profile.introduction}</p>
-      </section>
-      <section className={styles.section} id="history">
-        <History chapters={user.profile.profilePageLifeStory.chapters} />
-      </section>
-    </>
-  );
-};
-
-// noinspection JSUnusedGlobalSymbols
-export default Index;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27d09b0..5a83d91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       sass:
         specifier: ^1.81.0
         version: 1.81.0
+      styled-jsx:
+        specifier: ^5.1.6
+        version: 5.1.6(react@18.3.1)
       wantedly-profile:
         specifier: ^0.1.1
         version: 0.1.1(encoding@0.1.13)(graphql@16.9.0)
diff --git a/styles/variables.scss b/styles/variables.scss
deleted file mode 100644
index 6950b33..0000000
--- a/styles/variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$color-text-primary: #1d1d1d;
-$color-text-secondary: #505050;
diff --git a/tsconfig.json b/tsconfig.json
index 99710e8..5c70191 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,20 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }