Integrate Next.js with MongoDB

import { MongoClient } from "mongodb";
declare global {
  var _mongoClientPromise: Promise<MongoClient> | undefined;
}
const uri = process.env.MONGODB_URI;
const options = {};
let client: MongoClient;
let clientPromise: Promise<MongoClient>;
if (!uri) {
  throw new Error("Please add your Mongo URI to .env.local");
}
client = new MongoClient(uri, options);
clientPromise = client.connect();
// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise;

import { NextResponse } from "next/server";
import clientPromise from "@/lib/mongodb";
export async function GET() {
  try {
    const client = await clientPromise;
    const db = client.db("sample_restaurants");
    const restaurants = await db
      .collection("restaurants")
      .find({})
      .toArray();
    return NextResponse.json(restaurants);
  } catch {
    return NextResponse.json(
      { error: "Failed to fetch restaurants" },
      { status: 500 }
    );
  }
}

import { NextResponse } from "next/server";
import clientPromise from "@/lib/mongodb";
export async function GET() {
  try {
    const client = await clientPromise;
    const db = client.db("sample_restaurants");
    
    const query = {
      borough: "Queens",
      name: { $regex: "Moon", $options: "i" },
    };
    
    const restaurants = await db
      .collection("restaurants")
      .find(query)
      .toArray();
    return NextResponse.json(restaurants);
  } catch {
    return NextResponse.json(
      { error: "Failed to fetch restaurants" },
      { status: 500 }
    );
  }
}

import Link from "next/link";
export default function Navbar() {
  return (
    <nav className="bg-gray-800 p-4">
      <div className="container mx-auto flex justify-between items-center">
        <Link href="/" className="text-white text-xl font-bold">
          MongoDB Restaurants
        </Link>
        <div className="space-x-4">
          <Link
            href="/"
            className="text-gray-300 hover:text-white transition-colors"
          >
            All Restaurants
          </Link>
          <Link
            href="/browse"
            className="text-gray-300 hover:text-white transition-colors"
          >
            Filtered Restaurants
          </Link>
        </div>
      </div>
    </nav>
  );
}

"use client"; 
/* The above directive tells Next.js to render this component
   on the client side instead of the server side. 
   Client components can use React hooks like useState 
   and useEffect, while server components cannot.
*/
import { useEffect, useState } from "react";
import { ObjectId } from "mongodb";
interface Restaurant {
  _id: ObjectId;
  name: string;
  borough: string;
  cuisine: string;
}
interface RestaurantProps {
  restaurant: Restaurant;
}
const Restaurant = (props: RestaurantProps) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.borough}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.cuisine}
    </td>
  </tr>
);
interface RestaurantListProps {
  endpoint: string;
  title: string;
}
export default function RestaurantList({ endpoint, title }: RestaurantListProps) {
  const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    async function getRestaurants() {
      try {
        const response = await fetch(endpoint);
        if (!response.ok) {
          const message = `An error occurred: ${response.statusText}`;
          console.error(message);
          return;
        }
        const restaurants = await response.json();
        setRestaurants(restaurants);
      } catch (error) {
        console.error("Error fetching restaurants:", error);
      } finally {
        setLoading(false);
      }
    }
    getRestaurants();
  }, [endpoint]);
  function restaurantList() {
    return restaurants.map((restaurant) => {
      return <Restaurant restaurant={restaurant} key={restaurant._id.toString()} />;
    });
  }
  if (loading) {
    return <div className="p-4">Loading...</div>;
  }
  return (
    <>
      <h3 className="text-lg font-semibold p-4">{title}</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Borough
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Cuisine
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {restaurantList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

import RestaurantList from "@/components/RestaurantList";
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <RestaurantList
        endpoint="/api/restaurants"
        title="All Restaurants"
      />
    </main>
  );
}

import RestaurantList from "@/components/RestaurantList";
export default function Browse() {
  return (
    <main className="container mx-auto p-4">
      <RestaurantList
        endpoint="/api/browse"
        title='Filtered Restaurants (Queens, containing "Moon")'
      />
    </main>
  );
}

import "./globals.css";
import Navbar from "@/components/Navbar";
import { Metadata } from "next";
export const metadata: Metadata = {
  title: "MongoDB Next.js App",
  description: "A Next.js application with MongoDB integration",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}