アニメーション機能を実装。

Author: The-Infinitys

src/app/[article_year]/[month]/[aid]/page.tsx

@@ -3,6 +3,8 @@ import { getArticleIndexes } from "@/app/article/article";
 import { toHTML } from "@/app/article/article";
 import "./page.css";
 import { Metadata } from "next";
+import Loading from "@/app/loading";
+import { Suspense } from "react";
 export async function generateStaticParams() {
   const indexes = getArticleIndexes();
 
@@ -46,7 +48,7 @@ export async function generateMetadata({
   const og_image_url = `${slug}/${article?.thumbnail?.split("/").slice(-1)[0]}`;
   const metadata: Metadata = {
     metadataBase: new URL(
-      process.env.BASE_URL || "https://the-infinitys.f5.si",
+      process.env.BASE_URL || "https://the-infinitys.f5.si"
     ),
     title: fullTitle, // ページのタイトルを設定
     description: description, // ページのディスクリプションを設定
@@ -72,5 +74,9 @@ export default function ArticlePage({
 }: {
   params: Promise<{ article_year: string; month: string; aid: string }>;
 }) {
-  return <ArticleServer params={params} />;
+  return (
+    <Suspense fallback={<Loading />}>
+      <ArticleServer params={params} />
+    </Suspense>
+  );
 }

src/app/article/page.tsx

@@ -3,7 +3,8 @@ import "./page.css";
 import Explains from "./components/explains";
 import ArticlePage from "./components/articlepage"; // クライアントコンポーネントをインポート
 import { Metadata } from "next";
-
+import Loading from "@/app/loading";
+import { Suspense } from "react";
 export const metadata: Metadata = {
   title: "The Infinity's Articles",
   description: "Much! A lot of! Ideas!",
@@ -13,7 +14,9 @@ export default function Article() {
   return (
     <>
       <Explains />
-      <ArticlePage />
+      <Suspense fallback={<Loading />}>
+        <ArticlePage />
+      </Suspense>
     </>
   );
 }

src/app/layout.tsx

@@ -1,12 +1,10 @@
 import "./globals.css";
 import Header from "./layout/header";
 import Footer from "./layout/footer";
-import { Suspense } from "react";
 import BackToTopButton from "./layout/back2top";
 import I18nProvider from "./i18nProvider";
 import { Geist, Geist_Mono } from "next/font/google";
 import type { Metadata } from "next";
-import Loading from "./loading";
 export const metadata: Metadata = {
   title: "The Infinity's",
   description: "Believe in The Infinite Possibilities!",
@@ -32,11 +30,9 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <I18nProvider>
-          <Suspense fallback={<Loading />}>
-            <Header />
-            {children}
-            <Footer />
-          </Suspense>
+          <Header />
+          {children}
+          <Footer />
         </I18nProvider>
         <BackToTopButton />
       </body>

src/app/template.tsx

@@ -1,31 +1,28 @@
 "use client";
 import { motion } from "framer-motion";
 import React from "react";
-import { AnimatePresence } from "framer-motion";
-
 const variants = {
   hidden: { opacity: 0 },
   enter: { opacity: 1 },
 };
 
 export default function Template({ children }: { children: React.ReactNode }) {
   return (
-    <AnimatePresence exitBeforeEnter>
-      <motion.main
-        className="site-wrapper"
-        variants={variants}
-        initial="hidden"
-        animate="enter"
-        style={{
-          minHeight: "100vh",
-        }}
-        transition={{
-          type: "linear",
-          duration: 2,
-        }}
-      >
-        {children}
-      </motion.main>
-    </AnimatePresence>
+    <motion.main
+      className="site-wrapper"
+      variants={variants}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      // exit={{ opacity: 0 }} // no means
+      style={{
+        minHeight: "100vh",
+      }}
+      transition={{
+        type: "linear",
+        duration: 2,
+      }}
+    >
+      {children}
+    </motion.main>
   );
 }