feat!: upgrade to Next 15 (#170)

moonlitgrace · Oct 31, 2024 · 78d0cad · 78d0cad
1 parent 4e21863
commit 78d0cad
Show file tree

Hide file tree

Showing 17 changed files with 704 additions and 291 deletions.
diff --git a/app/(routes)/(admin)/admin/blog/[slug]/page.tsx b/app/(routes)/(admin)/admin/blog/[slug]/page.tsx
@@ -2,7 +2,8 @@ import AdminBlogForm from '@/app/_components/_admin/admin-blog-form';
 import { PostSelect } from '@/db/schema';
 import { notFound } from 'next/navigation';
 
-export default async function Page({ params }: { params: { slug: string } }) {
+export default async function Page(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   const post: Omit<PostSelect, 'createdAt'> = await fetch(
     `${process.env.NEXT_PUBLIC_APP_URL}/api/blog/${params.slug}`,
   )

diff --git a/app/(routes)/(admin)/layout.tsx b/app/(routes)/(admin)/layout.tsx
@@ -1,18 +1,14 @@
-import dynamic from 'next/dynamic';
+import AdminBar from '@/app/_components/_admin/admin-bar';
 import React from 'react';
 
-const DynamicAdminBar = dynamic(() => import('@/app/_components/_admin/admin-bar'), {
-  ssr: false,
-});
-
 export default function ProtectedLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <div className="mb-40 mt-10 flex w-full flex-col gap-10 md:mb-10">
-      <DynamicAdminBar />
+      <AdminBar />
       {children}
     </div>
   );

diff --git a/app/(routes)/(main)/blog/[slug]/page.tsx b/app/(routes)/(main)/blog/[slug]/page.tsx
@@ -8,11 +8,10 @@ import Markdown from '@/components/markdown';
 import TableOfContents from '@/app/_components/_main/table-of-contents';
 import { notFound } from 'next/navigation';
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/blog/${params.slug}`);
 
   if (res.status === 404)
@@ -62,7 +61,8 @@ export async function generateMetadata({
   };
 }
 
-export default async function Page({ params }: { params: { slug: string } }) {
+export default async function Page(props: { params: Promise<{ slug: string }> }) {
+  const params = await props.params;
   const post: PostSelect = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/blog/${params.slug}`)
     .then((res) => {
       if (res.status === 404) notFound();

diff --git a/app/(routes)/(main)/layout.tsx b/app/(routes)/(main)/layout.tsx
@@ -1,10 +1,6 @@
-import dynamic from 'next/dynamic';
+import AppBar from '@/app/_components/_main/app-bar';
 import React from 'react';
 
-const DynamicAppBar = dynamic(() => import('@/app/_components/_main/app-bar'), {
-  ssr: false,
-});
-
 export default function MainLayout({
   children,
 }: Readonly<{
@@ -13,7 +9,7 @@ export default function MainLayout({
   return (
     <>
       {children}
-      <DynamicAppBar />
+      <AppBar />
     </>
   );
 }
diff --git a/app/_components/_admin/_login/auth-form.tsx b/app/_components/_admin/_login/auth-form.tsx
@@ -4,11 +4,10 @@ import { login } from '@/actions/auth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useFormStatus } from 'react-dom';
-import { useFormState } from 'react-dom';
+import { useActionState } from 'react';
 
 export function AuthForm() {
-  const [state, action] = useFormState(login, undefined);
+  const [state, action, isPending] = useActionState(login, undefined);
 
   return (
     <form action={action} className="flex flex-col gap-2">
@@ -24,12 +23,7 @@ export function AuthForm() {
           <p className="text-sm text-muted-foreground">{state?.errors.password}</p>
         </div>
       </div>
-      <SubmitButton />
+      <Button disabled={isPending}>{isPending ? 'Loging in' : 'Log in'}</Button>
     </form>
   );
 }
-
-function SubmitButton() {
-  const { pending } = useFormStatus();
-  return <Button disabled={pending}>{pending ? 'Loging in' : 'Log in'}</Button>;
-}
diff --git a/app/_components/_admin/admin-bar.tsx b/app/_components/_admin/admin-bar.tsx
@@ -3,18 +3,16 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
-import { useScreenDevice } from '@/hooks/use-screen-device';
 import HomeIcon from '@/components/icons/home';
+import { ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AdminBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -49,9 +47,7 @@ const AdminBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>

diff --git a/app/_components/_admin/admin-blog-form.tsx b/app/_components/_admin/admin-blog-form.tsx
@@ -4,8 +4,7 @@ import adminBlogSubmit from '@/actions/admin';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState, useRef, ChangeEvent } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useEffect, useState, useRef, ChangeEvent, useActionState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import Markdown from '@/components/markdown';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -23,7 +22,8 @@ type Props = Partial<{
 }>;
 
 export default function AdminBlogForm({ id, title, tag, content, cover, draft = false }: Props) {
-  const [state, action] = useFormState(adminBlogSubmit, undefined);
+  const [state, action, isPending] = useActionState(adminBlogSubmit, undefined);
+
   const [contentState, setContentState] = useState(content);
   const [showCoverClearBtn, setShowCoverClearBtn] = useState(false);
 
@@ -134,18 +134,11 @@ export default function AdminBlogForm({ id, title, tag, content, cover, draft =
               Save as Draft
             </label>
           </div>
-          <SubmitButton />
+          <Button className="w-full" disabled={isPending}>
+            {isPending ? 'Submitting...' : 'Submit'}
+          </Button>
         </div>
       </form>
     </>
   );
 }
-
-function SubmitButton() {
-  const { pending } = useFormStatus();
-  return (
-    <Button className="w-full" disabled={pending}>
-      {pending ? 'Submitting...' : 'Submit'}
-    </Button>
-  );
-}
diff --git a/app/_components/_main/app-bar.tsx b/app/_components/_main/app-bar.tsx
@@ -4,21 +4,17 @@ import Link from 'next/link';
 import HomeIcon from '@/components/icons/home';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
 import GithubIcon from '@/components/icons/github';
 import MailIcon from '@/components/icons/mail';
-import { Separator } from '@/components/ui/separator';
-import { useScreenDevice } from '@/hooks/use-screen-device';
-import { cn } from '@/lib/utils';
+import { ResponsiveSeparator, ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AppBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -65,15 +61,10 @@ const AppBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
-        <Separator
-          orientation={isMobile ? 'vertical' : 'horizontal'}
-          className={cn(isMobile ? 'h-5' : 'h-px w-1/2')}
-        />
+        <ResponsiveSeparator />
         {Object.values(MAPPING.socials).map((item, idx) => (
           <Tooltip key={idx}>
             <TooltipTrigger asChild>
@@ -91,9 +82,7 @@ const AppBar = () => {
                 </a>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>

diff --git a/app/_components/responsive.tsx b/app/_components/responsive.tsx
@@ -0,0 +1,24 @@
+import { Separator } from '@/components/ui/separator';
+import { TooltipContent } from '@/components/ui/tooltip';
+
+export const ResponsiveTooltipContent = ({ content }: { content: string }) => {
+  return (
+    <>
+      <TooltipContent className="hidden md:flex" sideOffset={15} side="right">
+        <p>{content}</p>
+      </TooltipContent>
+      <TooltipContent className="md:hidden" sideOffset={15} side="top">
+        <p>{content}</p>
+      </TooltipContent>
+    </>
+  );
+};
+
+export const ResponsiveSeparator = () => {
+  return (
+    <>
+      <Separator orientation="horizontal" className="hidden h-px w-1/2 md:flex" />
+      <Separator orientation="vertical" className="h-5 md:hidden" />
+    </>
+  );
+};
diff --git a/app/_lib/session.ts b/app/_lib/session.ts
@@ -29,7 +29,7 @@ export async function createSession(username: string) {
   const expireTime = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
   const session = await encrypt({ username, expireTime });
 
-  cookies().set('session', session, {
+  (await cookies()).set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expireTime,

diff --git a/app/api/blog/[slug]/route.ts b/app/api/blog/[slug]/route.ts
@@ -4,10 +4,11 @@ import { eq } from 'drizzle-orm';
 import { NextRequest, NextResponse } from 'next/server';
 
 interface RestProps {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }
 
-export async function GET(_request: NextRequest, { params }: RestProps) {
+export async function GET(_request: NextRequest, props: RestProps) {
+  const params = await props.params;
   try {
     const post = await db
       .select()
@@ -26,7 +27,8 @@ export async function GET(_request: NextRequest, { params }: RestProps) {
   }
 }
 
-export async function DELETE(_request: NextRequest, { params }: RestProps) {
+export async function DELETE(_request: NextRequest, props: RestProps) {
+  const params = await props.params;
   try {
     await db.delete(posts).where(eq(posts.slug, params.slug));
     return NextResponse.json({ message: 'success' });

diff --git a/hooks/use-screen-device.ts b/hooks/use-screen-device.ts
diff --git a/middleware.ts b/middleware.ts
@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { decrypt } from './app/_lib/session';
 
 export default async function middleware(request: NextRequest) {
-  const cookie = cookies().get('session')?.value;
+  const cookie = (await cookies()).get('session')?.value;
   const session = await decrypt(cookie);
 
   const { pathname } = request.nextUrl;

diff --git a/next.config.mjs b/next.config.mjs
@@ -16,10 +16,12 @@ const nextConfig = {
   output: 'standalone',
   reactStrictMode: false,
   images: {
-    remotePatterns: [{
-      protocol: 'https',
-      hostname: 'res.cloudinary.com'
-    }]
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+      },
+    ],
   },
   experimental: {
     turbo: {