refactor: replace to app router (#1780)

app/(static)/layout.module.css

@@ -0,0 +1,87 @@
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 680px;
+  padding: 20px 0;
+  width: 100%;
+}
+
+.logo {
+  background-color: #212121;
+  border-radius: 3px;
+  color: #fff;
+  display: block;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 7px;
+  line-height: 2;
+  padding: 0 0.2em 0 0.5em;
+  text-decoration: none;
+}
+
+.navigationList {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.navigationItem {
+  display: block;
+  margin: 0 4px;
+  padding: 0;
+}
+
+.shareButton {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
+@media (min-width: 500px) {
+  .shareButton {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+.shareIcon {
+  height: 16px;
+  width: 16px;
+}
+
+@media (min-width: 500px) {
+  .shareIcon {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.content {
+  padding-top: 30px;
+}
+
+.message {
+  background-color: #fff;
+  border: solid #000 4px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  color: #000;
+  margin: 0 auto;
+  max-width: 680px;
+  padding: 25px 0;
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .message {
+    margin-top: 50px;
+    padding-bottom: 40px;
+    padding-top: 40px;
+  }
+}

app/(static)/layout.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link'
+import { type ReactNode } from 'react'
+
+import { createLineShareURL, createTweetURL } from '@/lib/share'
+import pkg from '@/package.json'
+
+import styles from './layout.module.css'
+import lineLogo from './line.svg'
+import twitterLogo from './twitter.svg'
+
+type Props = {
+  children: ReactNode
+}
+
+export default function StaticLayout({ children }: Props): JSX.Element {
+  return (
+    <>
+      <header className={styles.header}>
+        <Link className={styles.logo} href="/">
+          ANiMARE
+        </Link>
+
+        <nav>
+          <ul className={styles.navigationList}>
+            <li className={styles.navigationItem}>
+              <a
+                className={styles.shareButton}
+                href={createTweetURL(new URL('/', pkg.homepage).toString())}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  alt="Twitter"
+                  className={styles.shareIcon}
+                  height="24"
+                  src={twitterLogo.src}
+                  width="24"
+                />
+              </a>
+            </li>
+            <li className={styles.navigationItem}>
+              <a
+                className={styles.shareButton}
+                href={createLineShareURL(new URL('/', pkg.homepage).toString())}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  alt="Line"
+                  className={styles.shareIcon}
+                  height="24"
+                  src={lineLogo.src}
+                  width="24"
+                />
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <main className={styles.content}>
+        <div className={styles.message}>{children}</div>
+      </main>
+    </>
+  )
+}

app/(static)/list/page.module.css

@@ -0,0 +1,86 @@
+.release {
+  box-sizing: border-box;
+  padding: 30px 0 0;
+  margin: 30px 24px 0;
+}
+
+.release:first-of-type {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+@media (min-width: 500px) {
+  .release {
+    border-top: solid #ececec 2px;
+    margin: 50px auto 0;
+    max-width: 500px;
+    padding: 50px 24px 0;
+    width: 100%;
+  }
+}
+
+.releaseTitle {
+  color: #0588f7;
+  font-size: 2.8rem;
+  font-weight: 900;
+  letter-spacing: 0.04rem;
+  line-height: 1.4;
+  margin: 0 0 6px;
+}
+
+@media (min-width: 500px) {
+  .releaseTitle {
+    font-size: 3.6rem;
+    margin-bottom: 12px;
+  }
+}
+
+.releaseDate {
+  display: block;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+@media (min-width: 500px) {
+  .releaseDate {
+    font-size: 1.4rem;
+  }
+}
+
+.releaseBody :global(p) {
+  font-size: 1.4rem;
+  line-height: 1.6;
+}
+
+.releaseBody :global(ul) {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+}
+
+.releaseBody :global(li) {
+  align-items: center;
+  display: flex;
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+  width: 50%;
+}
+
+.releaseBody :global(li::before) {
+  color: #0588f7;
+  content: 'arrow_right';
+  display: block;
+  font-family: Material Icons;
+  font-size: 2rem;
+  margin-left: -5px;
+}
+
+@media (min-width: 500px) {
+  .releaseBody :global(ul) {
+    margin-top: 18px;
+  }
+}

app/(static)/list/page.tsx

@@ -0,0 +1,40 @@
+import { format } from 'date-fns'
+import { type Metadata } from 'next'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+import { getAllReleases } from '@/lib/releases'
+
+import styles from './page.module.css'
+
+export const revalidate = 120
+
+export const metadata: Metadata = {
+  alternates: {
+    canonical: '/list'
+  },
+  title: 'お知らせ'
+}
+
+export default async function ReleasesPage(): Promise<JSX.Element> {
+  const releases = await getAllReleases()
+
+  return (
+    <>
+      {releases.map((release) => {
+        return (
+          <section className={styles.release} key={release.slug}>
+            <time className={styles.releaseDate} dateTime={release.date}>
+              {format(new Date(release.date), 'yyyy.MM.dd')}
+            </time>
+            <h2 className={styles.releaseTitle}>{release.title}</h2>
+
+            <div className={styles.releaseBody}>
+              {/* @ts-expect-error Async Server Component */}
+              <MDXRemote source={release.body} />
+            </div>
+          </section>
+        )
+      })}
+    </>
+  )
+}

app/(static)/page.module.css

@@ -0,0 +1,104 @@
+.title {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 10vw;
+  font-weight: inherit;
+  justify-content: center;
+  letter-spacing: 0.038rem;
+  line-height: 1.4;
+  margin: -8px 0 0;
+}
+
+.titleLine {
+  display: block;
+}
+
+@media (min-width: 500px) {
+  .titleLine {
+    font-size: 4.6rem;
+  }
+}
+
+.titleLine:first-of-type {
+  font-size: 2rem;
+}
+
+@media (min-width: 500px) {
+  .titleLine:first-of-type {
+    font-size: 2.4rem;
+  }
+}
+
+.description {
+  font-size: 1.3rem;
+  letter-spacing: 0.04rem;
+  line-height: 1.7;
+  margin: 20px 0 0;
+  text-align: center;
+}
+
+@media (min-width: 500px) {
+  .description {
+    font-size: 1.6rem;
+    line-height: 1.8;
+    margin-top: 30px;
+  }
+}
+
+.intro {
+  font-size: 1.5rem;
+  font-weight: 900;
+  letter-spacing: 0.04rem;
+  margin: 22px 0 0;
+  text-align: center;
+}
+
+@media (min-width: 500px) {
+  .intro {
+    font-size: 1.8rem;
+    margin-top: 24px;
+  }
+}
+
+.button {
+  align-items: center;
+  background-color: #0588f7;
+  border: solid #000 4px;
+  border-radius: 28px;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  font-size: 1.8rem;
+  height: 56px;
+  justify-content: center;
+  margin: 10px auto 0;
+  max-width: 380px;
+  text-decoration: none;
+  width: 80%;
+}
+
+@media (min-width: 500px) {
+  .button {
+    border-radius: 36px;
+    font-size: 2.4rem;
+    height: 72px;
+  }
+}
+
+.disclaimer {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 25px auto 0;
+  padding: 0 25px;
+}
+
+.disclaimerLink {
+  color: #14b9ff;
+  text-decoration: none;
+  transition: color 0.5s;
+}
+
+.disclaimerLink:hover {
+  color: #0588f7;
+}