feat: upgrade to next 13.2

.eslintrc.json

@@ -1,6 +1,24 @@
 {
-  "extends": "next/core-web-vitals",
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
   "rules": {
-    "@next/next/no-head-element": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "error"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn"]
+    },
+    "next": {
+      "rootDir": true
+    }
   }
 }

.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+.next
+build
+.contentlayer

app/(auth)/login/page.tsx

@@ -1,14 +1,25 @@
+import { Metadata } from "next"
 import Link from "next/link"
 
+import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
-import { UserAuthForm } from "@/components/dashboard/user-auth-form"
+import { buttonVariants } from "@/components/ui/button"
+import { UserAuthForm } from "@/components/user-auth-form"
+
+export const metadata: Metadata = {
+  title: "Login",
+  description: "Login to your account",
+}
 
 export default function LoginPage() {
   return (
     <div className="container flex h-screen w-screen flex-col items-center justify-center">
       <Link
         href="/"
-        className="absolute top-4 left-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm  font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:left-8"
+        className={cn(
+          buttonVariants({ variant: "ghost" }),
+          "absolute top-4 left-4 md:top-8 md:left-8"
+        )}
       >
         <>
           <Icons.chevronLeft className="mr-2 h-4 w-4" />
@@ -18,14 +29,19 @@ export default function LoginPage() {
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
           <Icons.logo className="mx-auto h-6 w-6" />
-          <h1 className="text-2xl font-bold">Welcome back</h1>
-          <p className="text-sm text-slate-600">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Welcome back
+          </h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400">
             Enter your email to sign in to your account
           </p>
         </div>
         <UserAuthForm />
-        <p className="px-8 text-center text-sm text-slate-600">
-          <Link href="/register" className="underline hover:text-brand">
+        <p className="px-8 text-center text-sm text-slate-500 dark:text-slate-400">
+          <Link
+            href="/register"
+            className="hover:text-brand underline underline-offset-4"
+          >
             Don&apos;t have an account? Sign Up
           </Link>
         </p>

app/(auth)/register/page.tsx

@@ -1,14 +1,24 @@
 import Link from "next/link"
 
+import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
-import { UserAuthForm } from "@/components/dashboard/user-auth-form"
+import { buttonVariants } from "@/components/ui/button"
+import { UserAuthForm } from "@/components/user-auth-form"
+
+export const metadata = {
+  title: "Create an account",
+  description: "Create an account to get started.",
+}
 
 export default function RegisterPage() {
   return (
     <div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <Link
         href="/login"
-        className="absolute top-4 right-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm  font-medium text-slate-900 hover:border-slate-200 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:right-8"
+        className={cn(
+          buttonVariants({ variant: "ghost" }),
+          "absolute top-4 right-4 md:top-8 md:right-8"
+        )}
       >
         Login
       </Link>
@@ -17,19 +27,27 @@ export default function RegisterPage() {
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
             <Icons.logo className="mx-auto h-6 w-6" />
-            <h1 className="text-2xl font-bold">Create an account</h1>
-            <p className="text-sm text-slate-600">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Create an account
+            </h1>
+            <p className="text-sm text-slate-500 dark:text-slate-400">
               Enter your email below to create your account
             </p>
           </div>
           <UserAuthForm />
-          <p className="px-8 text-center text-sm text-slate-600">
+          <p className="px-8 text-center text-sm text-slate-500 dark:text-slate-400">
             By clicking continue, you agree to our{" "}
-            <Link href="/terms" className="underline hover:text-brand">
+            <Link
+              href="/terms"
+              className="hover:text-brand underline underline-offset-4"
+            >
               Terms of Service
             </Link>{" "}
             and{" "}
-            <Link href="/privacy" className="underline hover:text-brand">
+            <Link
+              href="/privacy"
+              className="hover:text-brand underline underline-offset-4"
+            >
               Privacy Policy
             </Link>
             .

app/(dashboard)/dashboard/billing/loading.tsx

@@ -1,6 +1,6 @@
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { Card } from "@/ui/card"
+import { DashboardHeader } from "@/components/header"
+import { DashboardShell } from "@/components/shell"
+import { Card } from "@/components/ui/card"
 
 export default function DashboardBillingLoading() {
   return (

app/(dashboard)/dashboard/billing/page.tsx

@@ -1,26 +1,31 @@
 import { redirect } from "next/navigation"
 
-import { getCurrentUser } from "@/lib/session"
 import { authOptions } from "@/lib/auth"
+import { getCurrentUser } from "@/lib/session"
 import { stripe } from "@/lib/stripe"
-import { getUserSubscriptionPlan as getUserSubscriptionPlan } from "@/lib/subscription"
-import { Card } from "@/ui/card"
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { BillingForm } from "@/components/dashboard/billing-form"
+import { getUserSubscriptionPlan } from "@/lib/subscription"
+import { BillingForm } from "@/components/billing-form"
+import { DashboardHeader } from "@/components/header"
+import { DashboardShell } from "@/components/shell"
+import { Card } from "@/components/ui/card"
+
+export const metadata = {
+  title: "Billing",
+  description: "Manage billing and your subscription plan.",
+}
 
 export default async function BillingPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    redirect(authOptions.pages.signIn)
+    redirect(authOptions?.pages?.signIn || "/login")
   }
 
   const subscriptionPlan = await getUserSubscriptionPlan(user.id)
 
   // If user has a pro plan, check cancel status on Stripe.
   let isCanceled = false
-  if (subscriptionPlan.isPro) {
+  if (subscriptionPlan.isPro && subscriptionPlan.stripeSubscriptionId) {
     const stripePlan = await stripe.subscriptions.retrieve(
       subscriptionPlan.stripeSubscriptionId
     )

app/(dashboard)/dashboard/layout.tsx

@@ -2,9 +2,9 @@ import { notFound } from "next/navigation"
 
 import { dashboardConfig } from "@/config/dashboard"
 import { getCurrentUser } from "@/lib/session"
-import { DashboardNav } from "@/components/dashboard/nav"
-import { UserAccountNav } from "@/components/dashboard/user-account-nav"
 import { MainNav } from "@/components/main-nav"
+import { DashboardNav } from "@/components/nav"
+import { UserAccountNav } from "@/components/user-account-nav"
 
 interface DashboardLayoutProps {
   children?: React.ReactNode

app/(dashboard)/dashboard/loading.tsx

@@ -1,7 +1,7 @@
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { PostCreateButton } from "@/components/dashboard/post-create-button"
-import { PostItem } from "@/components/dashboard/post-item"
+import { DashboardHeader } from "@/components/header"
+import { PostCreateButton } from "@/components/post-create-button"
+import { PostItem } from "@/components/post-item"
+import { DashboardShell } from "@/components/shell"
 
 export default function DashboardLoading() {
   return (

app/(dashboard)/dashboard/page.tsx

@@ -1,15 +1,21 @@
-import { redirect } from "next/navigation"
 import { cache } from "react"
+import { redirect } from "next/navigation"
+import { User } from "@prisma/client"
 
+import { authOptions } from "@/lib/auth"
 import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
-import { User } from "@prisma/client"
-import { authOptions } from "@/lib/auth"
-import { DashboardHeader } from "@/components/dashboard/header"
-import { PostCreateButton } from "@/components/dashboard/post-create-button"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { PostItem } from "@/components/dashboard/post-item"
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"
+import { cn } from "@/lib/utils"
+import { EmptyPlaceholder } from "@/components/empty-placeholder"
+import { DashboardHeader } from "@/components/header"
+import { PostCreateButton } from "@/components/post-create-button"
+import { PostItem } from "@/components/post-item"
+import { DashboardShell } from "@/components/shell"
+import { buttonVariants } from "@/components/ui/button"
+
+export const metadata = {
+  title: "Dashboard",
+}
 
 const getPostsForUser = cache(async (userId: User["id"]) => {
   return await db.post.findMany({
@@ -32,7 +38,7 @@ export default async function DashboardPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    redirect(authOptions.pages.signIn)
+    redirect(authOptions?.pages?.signIn || "/login")
   }
 
   const posts = await getPostsForUser(user.id)
@@ -56,7 +62,12 @@ export default async function DashboardPage() {
             <EmptyPlaceholder.Description>
               You don&apos;t have any posts yet. Start creating content.
             </EmptyPlaceholder.Description>
-            <PostCreateButton className="border-slate-200 bg-white text-brand-900 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2" />
+            <PostCreateButton
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "text-slate-900"
+              )}
+            />
           </EmptyPlaceholder>
         )}
       </div>

app/(dashboard)/dashboard/settings/loading.tsx

@@ -1,6 +1,6 @@
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { Card } from "@/ui/card"
+import { DashboardHeader } from "@/components/header"
+import { DashboardShell } from "@/components/shell"
+import { Card } from "@/components/ui/card"
 
 export default function DashboardSettingsLoading() {
   return (

app/(dashboard)/dashboard/settings/page.tsx

@@ -1,16 +1,21 @@
 import { redirect } from "next/navigation"
 
-import { getCurrentUser } from "@/lib/session"
 import { authOptions } from "@/lib/auth"
-import { DashboardHeader } from "@/components/dashboard/header"
-import { DashboardShell } from "@/components/dashboard/shell"
-import { UserNameForm } from "@/components/dashboard/user-name-form"
+import { getCurrentUser } from "@/lib/session"
+import { DashboardHeader } from "@/components/header"
+import { DashboardShell } from "@/components/shell"
+import { UserNameForm } from "@/components/user-name-form"
+
+export const metadata = {
+  title: "Settings",
+  description: "Manage account and website settings.",
+}
 
 export default async function SettingsPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    redirect(authOptions.pages.signIn)
+    redirect(authOptions?.pages?.signIn || "/login")
   }
 
   return (
@@ -20,7 +25,9 @@ export default async function SettingsPage() {
         text="Manage account and website settings."
       />
       <div className="grid gap-10">
-        <UserNameForm user={{ id: user.id, name: user.name }} />
+        {user?.name ? (
+          <UserNameForm user={{ id: user.id, name: user.name }} />
+        ) : null}
       </div>
     </DashboardShell>
   )