Merge pull request #4 from takusan23/nextjs_15

Next.js 15 にアップデートしただけ
takusan23 · Jan 7, 2025 · 65561dd · 65561dd
2 parents dd54925 + 61e3e1c
commit 65561dd
Show file tree

Hide file tree

Showing 12 changed files with 579 additions and 150 deletions.
diff --git a/app/pages/[page]/page.tsx b/app/pages/[page]/page.tsx
@@ -14,11 +14,12 @@ import "../../../styles/css/content.css"
 
 /** 動的ルーティング */
 type PageProps = {
-    params: { page: string }
+    params: Promise<{ page: string }>
 }
 
 /** head に値を入れる */
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+    const params = await props.params;
     const markdownData = await ContentFolderManager.getPageItem(params.page)
     const ogpTitle = `${markdownData.title} - ${EnvironmentTool.SITE_NAME}`
     const ogpUrl = `${EnvironmentTool.BASE_URL}${markdownData.link}`
@@ -36,7 +37,8 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 }
 
 /** 固定ページの記事本文 */
-export default async function PageDetailPage({ params }: PageProps) {
+export default async function PageDetailPage(props: PageProps) {
+    const params = await props.params;
     // サーバー側でロードする
     const markdownData = await ContentFolderManager.getPageItem(params.page)
 

diff --git a/app/posts/[blog]/opengraph-image.png/route.tsx b/app/posts/[blog]/opengraph-image.png/route.tsx
@@ -7,7 +7,7 @@ import FileReadTool from "../../../../src/FileReadTool"
 
 /** 動的ルーティング */
 type PageProps = {
-    params: { blog: string }
+    params: Promise<{ blog: string }>
 }
 
 /**
@@ -17,7 +17,8 @@ type PageProps = {
  * 使える CSS は以下参照：
  * https://github.com/vercel/satori
  */
-export async function GET(_: Request, { params }: PageProps) {
+export async function GET(_: Request, props: PageProps) {
+    const params = await props.params;
     // 記事を取得
     const markdownData = await ContentFolderManager.getBlogItem(params.blog)
 

diff --git a/app/posts/[blog]/page.tsx b/app/posts/[blog]/page.tsx
@@ -14,11 +14,12 @@ import "../../../styles/css/content.css"
 
 /** 動的ルーティング */
 type PageProps = {
-    params: { blog: string }
+    params: Promise<{ blog: string }>
 }
 
 /** head に値を入れる */
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+    const params = await props.params;
     const markdownData = await ContentFolderManager.getBlogItem(params.blog)
     const ogpTitle = `${markdownData.title} - ${EnvironmentTool.SITE_NAME}`
     const ogpUrl = `${EnvironmentTool.BASE_URL}${markdownData.link}`
@@ -41,7 +42,8 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
  * 記事本文。
  * 反映されない場合はスーパーリロードしてみてください。
  */
-export default async function BlogDetailPage({ params }: PageProps) {
+export default async function BlogDetailPage(props: PageProps) {
+    const params = await props.params;
     // サーバー側でロードする
     const markdownData = await ContentFolderManager.getBlogItem(params.blog)
 

diff --git a/app/posts/page/[page]/page.tsx b/app/posts/page/[page]/page.tsx
@@ -11,7 +11,7 @@ const BLOG_SIZE_LIMIT = 10
 
 /** 動的ルーティング */
 type PageProps = {
-    params: { page: string }
+    params: Promise<{ page: string }>
 }
 
 /** head に値を入れる */
@@ -20,7 +20,8 @@ export const metadata: Metadata = {
 }
 
 /** 記事一覧ページ */
-export default async function BlogListPage({ params }: PageProps) {
+export default async function BlogListPage(props: PageProps) {
+    const params = await props.params;
     // posts/page/<ここ> を取得
     const pageId = Number(params.page)
     // 記事一覧を取得する。async なので待つ。-1してるのは1ページ目はskip:0にしたいため

diff --git a/app/posts/tag/[tag]/page.tsx b/app/posts/tag/[tag]/page.tsx
@@ -6,11 +6,12 @@ import BlogListItem from "../../../../components/BlogListItem"
 
 /** 動的ルーティング */
 type PageProps = {
-    params: { tag: string }
+    params: Promise<{ tag: string }>
 }
 
 /** head に値を入れる */
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+    const params = await props.params;
     const unEscapeText = decodeURIComponent(params.tag)
     return {
         title: `タグ名:${unEscapeText} - ${EnvironmentTool.SITE_NAME}`,
@@ -22,7 +23,8 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 }
 
 /** タグがついてる記事一覧ページ */
-export default async function TagListPage({ params }: PageProps) {
+export default async function TagListPage(props: PageProps) {
+    const params = await props.params;
     // パーセントエンコーディングされているため戻す
     const unEscapeText = decodeURIComponent(params.tag)
     // ページネーションは後で

diff --git a/app/sitemap.ts b/app/sitemap.ts
@@ -2,6 +2,10 @@ import { MetadataRoute } from "next";
 import EnvironmentTool from "../src/EnvironmentTool";
 import ContentFolderManager from "../src/ContentFolderManager";
 
+// 静的書き出しなので指定する必要がないはずだが、Next.js 15 から無いとエラーになってしまう
+// https://github.com/vercel/next.js/issues/68667
+export const dynamic = "force-static"
+
 /**
  * サイトマップを生成する。Next.js 単体で作れるようになった。
  * Trailing Slash が有効なので最後にスラッシュ入れました。

diff --git a/components/TagChipGroup.tsx b/components/TagChipGroup.tsx
@@ -13,15 +13,13 @@ export default function TagChipGroup({ tagList }: TagChipGroupProps) {
         <div className="flex flex-row flex-wrap gap-2">
             {
                 tagList.map(tagName => (
-                    <>
-                        <NextLinkButton
-                            size="small"
-                            key={tagName}
-                            href={`/posts/tag/${tagName}/`}
-                            startIcon={<SellIcon />}
-                            text={tagName}
-                        />
-                    </>
+                    <NextLinkButton
+                        size="small"
+                        key={tagName}
+                        href={`/posts/tag/${tagName}/`}
+                        startIcon={<SellIcon />}
+                        text={tagName}
+                    />
                 ))
             }
         </div>

diff --git 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/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -12,5 +12,13 @@ module.exports = {
     },
     experimental: {
         scrollRestoration: true,
+        turbo: {
+            rules: {
+                '*.svg': {
+                    loaders: ['@svgr/webpack'],
+                    as: '*.js',
+                },
+            },
+        }
     }
 }