mongodb connection

pages/_app.tsx

@@ -1,9 +1,12 @@
 import "../styles/tailwind.css"
-
 import { AppProps } from "next/app"
+import Layout from "../components/Layout/Layout";
+
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Layout>
+    <Component {...pageProps} />
+  </Layout>
 }
 
 export default MyApp

pages/api/players.ts

@@ -0,0 +1,16 @@
+import client from "../../lib/mongodb"
+
+export default async function handler(req, res) {
+  const db = client.db("SloppyFuckers")
+  switch (req.method) {
+    case "POST":
+      let bodyObject = JSON.parse(req.body)
+      let myPost = await db.collection("players").insertOne(bodyObject)
+      res.json(myPost.ops[0])
+      break
+    case "GET":
+      const allPosts = await db.collection("players").find({}).toArray()
+      res.json({ status: 200, data: allPosts })
+      break
+  }
+}

pages/index.tsx

@@ -1,55 +1,29 @@
-import Head from "next/head"
-import { Button } from "components/Button/Button"
-import { LP_GRID_ITEMS } from "../lp-items"
+export async function getServerSideProps({ res }) {
+  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
+  const response = await fetch("http://localhost:3000/api/players", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  const allPlayers = await response.json()
 
-export default function Web() {
+  return {
+    props: { allPlayers },
+  }
+}
+
+export default function Web({ allPlayers }) {
   return (
     <>
-      <Head>
-        <meta property="og:url" content="https://next-enterprise.vercel.app/" />
-        <meta
-          property="og:image"
-          content="https://raw.githubusercontent.com/Blazity/next-enterprise/main/project-logo.png"
-        />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <title>Next.js Enterprise Boilerplate</title>
-      </Head>
-      <section className="bg-white dark:bg-gray-900">
+      <section>
         <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
           <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
-              Next.js Enterprise Boilerplate
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+              IsaCon
             </h1>
-            <p className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl">
-              Jumpstart your enterprise project with our feature-packed, high-performance Next.js boilerplate!
-              Experience rapid UI development, AI-powered code reviews, and an extensive suite of tools for a smooth and
-              enjoyable development process.
-            </p>
-            <Button href="https://github.com/Blazity/next-enterprise" className="mr-3">
-              Get started
-            </Button>
-            <Button
-              href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
-              intent="secondary"
-            >
-              Deploy Now
-            </Button>
-          </div>
-        </div>
-      </section>
-      <section className="bg-white dark:bg-gray-900">
-        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
-          <div className="justify-center space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0 lg:grid-cols-3">
-            {LP_GRID_ITEMS.map((singleItem) => (
-              <div key={singleItem.title} className="flex flex-col items-center justify-center text-center">
-                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 p-1.5 text-blue-700 dark:bg-primary-900 lg:h-12 lg:w-12">
-                  {singleItem.icon}
-                </div>
-                <h3 className="mb-2 text-xl font-bold dark:text-white">{singleItem.title}</h3>
-                <p className="text-gray-500 dark:text-gray-400">{singleItem.description}</p>
-              </div>
+            {allPlayers.data.map((player) => (
+              <div key={player.id}>{player.name}</div>
             ))}
           </div>
         </div>