migration: nextjs 16 upgrade

app/admin/comments/page.tsx

@@ -54,30 +54,30 @@ const AdminCommentsPage = () => {
   }, [status, router]);
 
   useEffect(() => {
+    const fetchComments = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('/api/admin/comments');
+        const data = await response.json();
+
+        if (data.success) {
+          setIssuesWithComments(data.data);
+        } else {
+          setError(data.error || '댓글을 불러올 수 없습니다.');
+        }
+      } catch (err) {
+        setError('댓글을 불러오는 중 오류가 발생했습니다.');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
     if (status === 'authenticated') {
       fetchComments();
     }
   }, [status]);
 
-  const fetchComments = async () => {
-    try {
-      setLoading(true);
-      const response = await fetch('/api/admin/comments');
-      const data = await response.json();
-
-      if (data.success) {
-        setIssuesWithComments(data.data);
-      } else {
-        setError(data.error || '댓글을 불러올 수 없습니다.');
-      }
-    } catch (err) {
-      setError('댓글을 불러오는 중 오류가 발생했습니다.');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   if (status === 'loading' || loading) {
     return (
       <div className="p-6 max-w-7xl mx-auto">

app/admin/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import Link from 'next/link';
 import { signIn, signOut, useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
 import { BiFolder , BiCommentDetail } from 'react-icons/bi';
 import { FaChartBar } from 'react-icons/fa';
 import { FaBuffer } from 'react-icons/fa6';
@@ -18,10 +18,9 @@ import DecryptedText from '../entities/bits/DecryptedText';
 const AdminDashboard = () => {
   const { data: session } = useSession();
   const toast = useToast();
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(() => () => {}, () => true, () => false);
 
   useEffect(() => {
-    setMounted(true);
     if (session) {
       toast.success('관리자 페이지에 오신 것을 환영합니다.');
     }

app/admin/posts/page.tsx

@@ -23,24 +23,24 @@ const AdminPostListPage = () => {
   const ITEMS_PER_PAGE = 8;
 
   useEffect(() => {
+    const getPosts = async () => {
+      const response = await axios.get('/api/posts', {
+        params: {
+          compact: 'true',
+          page: currentPage,
+          limit: ITEMS_PER_PAGE,
+          private: 'true',
+        },
+      });
+      const data = await response.data;
+      setPosts(data.posts);
+      setTotalItems(data.pagination.totalPosts);
+      setLoading(false);
+    };
+
     getPosts();
   }, [currentPage]);
 
-  const getPosts = async () => {
-    const response = await axios.get('/api/posts', {
-      params: {
-        compact: 'true',
-        page: currentPage,
-        limit: ITEMS_PER_PAGE,
-        private: 'true',
-      },
-    });
-    const data = await response.data;
-    setPosts(data.posts);
-    setTotalItems(data.pagination.totalPosts);
-    setLoading(false);
-  };
-
   const handleEdit = (slug: string) => {
     toast.success('글 수정 페이지로 이동합니다.');
     router.push(`/admin/write?slug=${slug}`);

app/admin/series/page.tsx

@@ -11,15 +11,15 @@ import useDataFetch, {
 import { Series } from '@/app/types/Series';
 const AdminSeriesPage = () => {
   const [seriesList, setSeriesList] = useState<Series[] | null>(null);
-  const getSeriesListConfig: useDataFetchConfig = {
+  const getSeriesListConfig: useDataFetchConfig<Series[]> = {
     url: '/api/series',
     method: 'GET',
     config: {
       params: {
         compact: 'true',
       },
     },
-    onSuccess: (data: Series[]) => {
+    onSuccess: (data) => {
       setSeriesList(data);
     },
   };

app/admin/settings/page.tsx

@@ -6,6 +6,8 @@ import { FiArrowLeft, FiRefreshCw } from 'react-icons/fi';
 import { HiOutlineDocumentText } from 'react-icons/hi';
 import useToast from '@/app/hooks/useToast';
 
+const SKELETON_WIDTHS = [72, 88, 65, 91, 78, 83, 69, 95];
+
 const SettingsPage = () => {
   const toast = useToast();
   const [llmsContent, setLlmsContent] = useState<string | null>(null);
@@ -87,7 +89,7 @@ const SettingsPage = () => {
           {llmsFetching ? (
             <div className="animate-pulse space-y-2">
               {[...Array(8)].map((_, i) => (
-                <div key={i} className="h-3.5 bg-gray-100 dark:bg-gray-800 rounded" style={{ width: `${60 + Math.random() * 35}%` }} />
+                <div key={i} className="h-3.5 bg-gray-100 dark:bg-gray-800 rounded" style={{ width: `${SKELETON_WIDTHS[i % SKELETON_WIDTHS.length]}%` }} />
               ))}
             </div>
           ) : llmsContent ? (

app/api/admin/comments/route.ts

@@ -71,6 +71,7 @@ export async function GET() {
           Accept: 'application/vnd.github+json',
           'X-GitHub-Api-Version': '2022-11-28',
         },
+        cache: 'no-store',
       }
     );
 
@@ -111,6 +112,7 @@ export async function GET() {
                 Accept: 'application/vnd.github+json',
                 'X-GitHub-Api-Version': '2022-11-28',
               },
+              cache: 'no-store',
             }
           );
 

app/api/atelier/messages/[id]/reaction/route.ts

@@ -5,13 +5,14 @@ import BlockedFingerprint from '@/app/models/BlockedFingerprint';
 import { ATELIER_EMOJIS, ReactionBucket } from '@/app/types/Atelier';
 
 interface RouteParams {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 // 허용 이모지 화이트리스트
 const allowedEmojiSet = new Set<string>(ATELIER_EMOJIS);
 
-export const POST = async (request: Request, { params }: RouteParams) => {
+export const POST = async (request: Request, props: RouteParams) => {
+  const params = await props.params;
   try {
     await dbConnect();
 

app/api/atelier/messages/[id]/route.ts

@@ -8,10 +8,11 @@ import dbConnect from '@/app/lib/dbConnect';
 import AtelierMessage from '@/app/models/AtelierMessage';
 
 interface RouteParams {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
-export const DELETE = async (request: Request, { params }: RouteParams) => {
+export const DELETE = async (request: Request, props: RouteParams) => {
+  const params = await props.params;
   try {
     await dbConnect();
 
@@ -78,7 +79,8 @@ export const DELETE = async (request: Request, { params }: RouteParams) => {
   }
 };
 
-export const PATCH = async (request: Request, { params }: RouteParams) => {
+export const PATCH = async (request: Request, props: RouteParams) => {
+  const params = await props.params;
   try {
     await dbConnect();
 
@@ -139,7 +141,8 @@ export const PATCH = async (request: Request, { params }: RouteParams) => {
   }
 };
 
-export const PUT = async (request: Request, { params }: RouteParams) => {
+export const PUT = async (request: Request, props: RouteParams) => {
+  const params = await props.params;
   try {
     await dbConnect();
 

app/api/atelier/messages/[id]/thread/route.ts

@@ -9,10 +9,11 @@ import dbConnect from '@/app/lib/dbConnect';
 import AtelierMessage from '@/app/models/AtelierMessage';
 
 interface RouteParams {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
-export const GET = async (request: Request, { params }: RouteParams) => {
+export const GET = async (request: Request, props: RouteParams) => {
+  const params = await props.params;
   try {
     await dbConnect();
 

app/api/opengraph/route.ts

@@ -38,6 +38,7 @@ export const GET = async (request: Request) => {
         Accept: 'text/html,application/xhtml+xml',
       },
       signal: AbortSignal.timeout(5000),
+      next: { revalidate: 3600 },
     });
 
     if (!res.ok)

app/api/portfolio/[slug]/route.ts

@@ -1,9 +1,7 @@
 import { portfolioData } from '@/app/api/portfolio/data';
 
-export async function GET(
-  request: Request,
-  { params }: { params: { slug: string } }
-) {
+export async function GET(request: Request, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     const slug = params.slug?.toLowerCase();
 

app/api/posts/[slug]/route.ts

@@ -7,10 +7,8 @@
 import Post from '@/app/models/Post';
 import Series from '@/app/models/Series';
 
-export async function GET(
-  req: NextRequest,
-  { params }: { params: { slug: string } }
-) {
+export async function GET(req: NextRequest, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     await dbConnect();
     const post = await Post.findOne({ slug: params.slug }).lean();
@@ -40,10 +38,8 @@
   }
 }
 
-export async function PUT(
-  req: NextRequest,
-  { params }: { params: { slug: string } }
-) {
+export async function PUT(req: NextRequest, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     // 글 수정은 관리자 전용
     const session = await getServerSession();
@@ -109,10 +105,8 @@
   }
 }
 
-export async function DELETE(
-  request: Request,
-  { params }: { params: { slug: string } }
-) {
+export async function DELETE(request: Request, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     // 글 삭제는 관리자 전용
     const session = await getServerSession();
@@ -145,7 +139,7 @@
     return NextResponse.json({
       message: '포스트가 성공적으로 삭제되었습니다.',
     });
   } catch (error: any) {
     return NextResponse.json(
       { error: error.message || '포스트 삭제에 실패했습니다.' },
       { status: 500 }

app/api/series/[slug]/route.ts

@@ -5,10 +5,8 @@
 import Series from '@/app/models/Series';
 import '@/app/models/Post';
 
-export async function GET(
-  request: Request,
-  { params }: { params: { slug: string } }
-) {
+export async function GET(request: Request, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     await dbConnect();
 
@@ -30,7 +28,7 @@
         'Cache-Control': 'public, max-age=60, s-maxage=60',
       },
     });
   } catch (error: any) {
     return NextResponse.json(
       { error: error.message || '시리즈 조회에 실패했습니다.' },
       { status: 500 }
@@ -38,10 +36,8 @@
   }
 }
 
-export async function PUT(
-  request: Request,
-  { params }: { params: { slug: string } }
-) {
+export async function PUT(request: Request, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     const session = await getServerSession();
 
@@ -73,7 +69,7 @@
     }
 
     return NextResponse.json(updatedSeries);
   } catch (error: any) {
     return NextResponse.json(
       { error: error.message || '시리즈 수정에 실패했습니다.' },
       { status: 500 }
@@ -81,10 +77,8 @@
   }
 }
 
-export async function DELETE(
-  request: Request,
-  { params }: { params: { slug: string } }
-) {
+export async function DELETE(request: Request, props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   try {
     const session = await getServerSession();
 
@@ -106,7 +100,7 @@
     return NextResponse.json({
       message: '시리즈가 성공적으로 삭제되었습니다.',
     });
   } catch (error: any) {
     return NextResponse.json(
       { error: error.message || '시리즈 삭제에 실패했습니다.' },
       { status: 500 }

app/api/subscribe/unsubscribe/route.ts

@@ -1,4 +1,4 @@
-import { isRedirectError } from 'next/dist/client/components/redirect';
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
 import { redirect } from 'next/navigation';
 import { NextRequest } from 'next/server';
 import dbConnect from '@/app/lib/dbConnect';

app/api/subscribe/verify/route.ts

@@ -1,4 +1,4 @@
-import { isRedirectError } from 'next/dist/client/components/redirect';
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
 import { redirect } from 'next/navigation';
 import { NextRequest } from 'next/server';
 import dbConnect from '@/app/lib/dbConnect';