Add link prefetches, rename user page in navbar

T1LT · Jan 17, 2024 · ea1d40b · ea1d40b
1 parent 5ea8a83
commit ea1d40b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/app/(recipes)/recipes/page.tsx b/app/(recipes)/recipes/page.tsx
@@ -4,7 +4,6 @@ import { capitalize } from "@/lib/utils";
 import { desc } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import { headers } from "next/headers";
-import Link from "next/link";
 
 async function getRecipes(filter: string) {
   if (!filter || filter === "all") {
@@ -44,8 +43,6 @@ export default async function Recipes({
 }: {
   searchParams?: { [key: string]: string | undefined };
 }) {
-  headers();
-
   const { filter: filter } = searchParams as { [key: string]: string };
 
   const rid = headers().get("x-vercel-id") ?? nanoid();

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -26,10 +26,11 @@ export default function Navbar() {
           </div>
         </Link>
         <nav className="hidden col-span-1 lg:block lg:col-span-4">
-          <ul className="flex space-x-4 sm:space-x-6 font-semibold">
+          <ul className="flex space-x-4 sm:space-x-6 font-semibold text-base">
             <li>
               <Link
                 href="/recipes?filter=all"
+                prefetch={true}
                 className="hover:underline underline-offset-4"
               >
                 All
@@ -39,6 +40,7 @@ export default function Navbar() {
             <li>
               <Link
                 href="/recipes?filter=popular"
+                prefetch={true}
                 className="hover:underline underline-offset-4"
               >
                 Popular
@@ -61,8 +63,12 @@ export default function Navbar() {
             </li>
             <li className="font-light select-none">|</li>
             <li>
-              <Link href="/user" className="hover:underline underline-offset-4">
-                User
+              <Link
+                href="/user"
+                prefetch={true}
+                className="hover:underline underline-offset-4"
+              >
+                Me
               </Link>
             </li>
           </ul>
@@ -89,12 +95,20 @@ export default function Navbar() {
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem>
-              <Link href="/recipes?filter=all" className="w-full">
+              <Link
+                href="/recipes?filter=all"
+                prefetch={true}
+                className="w-full"
+              >
                 All Recipes
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <Link href="/recipes?filter=popular" className="w-full">
+              <Link
+                href="/recipes?filter=popular"
+                prefetch={true}
+                className="w-full"
+              >
                 Popular Recipes
               </Link>
             </DropdownMenuItem>
@@ -110,8 +124,8 @@ export default function Navbar() {
               </Suspense>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <Link href="/user" className="w-full">
-                User Page
+              <Link href="/user" prefetch={true} className="w-full">
+                My Page
               </Link>
             </DropdownMenuItem>
             <DropdownMenuSeparator />

diff --git a/components/recipe-card.tsx b/components/recipe-card.tsx
@@ -13,6 +13,7 @@ export default function RecipeCard({ recipe }: { recipe: ReducedRecipe }) {
   return (
     <Link
       href={`/recipes/${recipe.id.replace(/^recipe_/, "")}`}
+      prefetch={true}
       className="flex flex-col items-center"
     >
       <div className="w-full px-4 py-4 flex flex-col items-start gap-2 group rounded-md hover:bg-neutral-100/75 transition">