From dd84b9d64fb98746a230cd24233ff50a562c39c9 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Fri, 28 Apr 2023 01:36:44 +0800
Subject:

---
 .../test/with-mongodb-mongoose/.env.local.example  |   1 +
 .../test/with-mongodb-mongoose/.gitignore          |  34 ++++
 .../test/with-mongodb-mongoose/README.md           |   5 +
 .../test/with-mongodb-mongoose/components/Form.js  | 202 +++++++++++++++++++++
 .../test/with-mongodb-mongoose/css/form.css        |  39 ++++
 .../test/with-mongodb-mongoose/css/style.css       | 184 +++++++++++++++++++
 .../test/with-mongodb-mongoose/lib/dbConnect.js    |  40 ++++
 .../test/with-mongodb-mongoose/models/Pet.js       |  59 ++++++
 .../test/with-mongodb-mongoose/next.config.js      |  12 ++
 .../test/with-mongodb-mongoose/package.json        |  20 ++
 .../test/with-mongodb-mongoose/pages/[id]/edit.js  |  33 ++++
 .../test/with-mongodb-mongoose/pages/[id]/index.js |  75 ++++++++
 .../test/with-mongodb-mongoose/pages/_app.js       |  36 ++++
 .../with-mongodb-mongoose/pages/api/pets/[id].js   |  56 ++++++
 .../with-mongodb-mongoose/pages/api/pets/index.js  |  32 ++++
 .../test/with-mongodb-mongoose/pages/index.js      |  65 +++++++
 .../test/with-mongodb-mongoose/pages/new.js        |  19 ++
 .../test/with-mongodb-mongoose/public/favicon.ico  | Bin 0 -> 15086 bytes
 .../test/with-mongodb-mongoose/public/zeit.svg     |  10 +
 19 files changed, 922 insertions(+)
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.env.local.example
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.gitignore
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/README.md
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/lib/dbConnect.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/models/Pet.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/next.config.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/package.json
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/edit.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/index.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/_app.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/[id].js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/index.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/index.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/new.js
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/favicon.ico
 create mode 100644 packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/zeit.svg

(limited to 'packages/turbo-tracing-next-plugin/test')

diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.env.local.example b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.env.local.example
new file mode 100644
index 0000000..9dead41
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.env.local.example
@@ -0,0 +1 @@
+MONGODB_URI=
\ No newline at end of file
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.gitignore b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.gitignore
new file mode 100644
index 0000000..1437c53
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/README.md b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/README.md
new file mode 100644
index 0000000..1f7110e
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/README.md
@@ -0,0 +1,5 @@
+# MongoDB and Mongoose with Next.js
+
+Copied from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb.
+
+Run `pnpm run --filter @vercel/turbo-tracing-test-app build` to build this application.
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js
new file mode 100644
index 0000000..b184d9c
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/components/Form.js
@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+
+const Form = ({ formId, petForm, forNewPet = true }) => {
+  const router = useRouter();
+  const contentType = "application/json";
+  const [errors, setErrors] = useState({});
+  const [message, setMessage] = useState("");
+
+  const [form, setForm] = useState({
+    name: petForm.name,
+    owner_name: petForm.owner_name,
+    species: petForm.species,
+    age: petForm.age,
+    poddy_trained: petForm.poddy_trained,
+    diet: petForm.diet,
+    image_url: petForm.image_url,
+    likes: petForm.likes,
+    dislikes: petForm.dislikes,
+  });
+
+  /* The PUT method edits an existing entry in the mongodb database. */
+  const putData = async (form) => {
+    const { id } = router.query;
+
+    try {
+      const res = await fetch(`/api/pets/${id}`, {
+        method: "PUT",
+        headers: {
+          Accept: contentType,
+          "Content-Type": contentType,
+        },
+        body: JSON.stringify(form),
+      });
+
+      // Throw error with status code in case Fetch API req failed
+      if (!res.ok) {
+        throw new Error(res.status);
+      }
+
+      const { data } = await res.json();
+
+      mutate(`/api/pets/${id}`, data, false); // Update the local data without a revalidation
+      router.push("/");
+    } catch (error) {
+      setMessage("Failed to update pet");
+    }
+  };
+
+  /* The POST method adds a new entry in the mongodb database. */
+  const postData = async (form) => {
+    try {
+      const res = await fetch("/api/pets", {
+        method: "POST",
+        headers: {
+          Accept: contentType,
+          "Content-Type": contentType,
+        },
+        body: JSON.stringify(form),
+      });
+
+      // Throw error with status code in case Fetch API req failed
+      if (!res.ok) {
+        throw new Error(res.status);
+      }
+
+      router.push("/");
+    } catch (error) {
+      setMessage("Failed to add pet");
+    }
+  };
+
+  const handleChange = (e) => {
+    const target = e.target;
+    const value =
+      target.name === "poddy_trained" ? target.checked : target.value;
+    const name = target.name;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const errs = formValidate();
+    if (Object.keys(errs).length === 0) {
+      forNewPet ? postData(form) : putData(form);
+    } else {
+      setErrors({ errs });
+    }
+  };
+
+  /* Makes sure pet info is filled for pet name, owner name, species, and image url*/
+  const formValidate = () => {
+    let err = {};
+    if (!form.name) err.name = "Name is required";
+    if (!form.owner_name) err.owner_name = "Owner is required";
+    if (!form.species) err.species = "Species is required";
+    if (!form.image_url) err.image_url = "Image URL is required";
+    return err;
+  };
+
+  return (
+    <>
+      <form id={formId} onSubmit={handleSubmit}>
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          maxLength="20"
+          name="name"
+          value={form.name}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="owner_name">Owner</label>
+        <input
+          type="text"
+          maxLength="20"
+          name="owner_name"
+          value={form.owner_name}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="species">Species</label>
+        <input
+          type="text"
+          maxLength="30"
+          name="species"
+          value={form.species}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="age">Age</label>
+        <input
+          type="number"
+          name="age"
+          value={form.age}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="poddy_trained">Potty Trained</label>
+        <input
+          type="checkbox"
+          name="poddy_trained"
+          checked={form.poddy_trained}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="diet">Diet</label>
+        <textarea
+          name="diet"
+          maxLength="60"
+          value={form.diet}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="image_url">Image URL</label>
+        <input
+          type="url"
+          name="image_url"
+          value={form.image_url}
+          onChange={handleChange}
+          required
+        />
+
+        <label htmlFor="likes">Likes</label>
+        <textarea
+          name="likes"
+          maxLength="60"
+          value={form.likes}
+          onChange={handleChange}
+        />
+
+        <label htmlFor="dislikes">Dislikes</label>
+        <textarea
+          name="dislikes"
+          maxLength="60"
+          value={form.dislikes}
+          onChange={handleChange}
+        />
+
+        <button type="submit" className="btn">
+          Submit
+        </button>
+      </form>
+      <p>{message}</p>
+      <div>
+        {Object.keys(errors).map((err, index) => (
+          <li key={index}>{err}</li>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Form;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css
new file mode 100644
index 0000000..4681e68
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/form.css
@@ -0,0 +1,39 @@
+form {
+  width: 90%;
+  margin: auto;
+  max-width: 550px;
+}
+input,
+form button,
+label {
+  display: block;
+}
+form button,
+input,
+textarea {
+  outline: none;
+}
+input,
+textarea {
+  border: 1px solid rgb(199, 199, 199);
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 90%;
+  width: 100%;
+  height: 30px;
+  color: rgb(53, 53, 53);
+}
+textarea {
+  height: 50px;
+}
+label {
+  margin-top: 10px;
+}
+form button {
+  --accent: rgb(0, 162, 255);
+  margin-top: 20px;
+}
+
+.form-container {
+  width: 90%;
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css
new file mode 100644
index 0000000..cb90218
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/css/style.css
@@ -0,0 +1,184 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+
+* {
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+}
+
+/* Nav Area */
+.top-bar {
+  width: 100%;
+  margin-top: 0;
+  position: relative;
+  height: 80px;
+  text-align: right;
+}
+#title {
+  position: absolute;
+  left: 20px;
+  top: 0;
+  display: inline-block;
+  height: 100%;
+}
+.nav {
+  height: 100%;
+  display: inline-block;
+}
+.nav a {
+  margin: 0 20px;
+  font-size: 120%;
+  height: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* Styles for Cards */
+.card {
+  display: inline-block;
+  width: 300px;
+  height: 400px;
+  overflow: hidden;
+  border: 1.25px solid rgb(233, 233, 233);
+  border-radius: 16px;
+  margin: 10px;
+  transition: 0.5s all;
+  --shadow: transparent;
+  box-shadow: 0 0 10px 5px var(--shadow);
+  position: relative;
+  font-size: 100%;
+}
+
+.card:hover {
+  --shadow: rgba(53, 53, 53, 0.103);
+  /* transform: rotateY(180deg) translate(20px, 20px);
+  background: pink; */
+}
+
+.card:hover .main-content {
+  pointer-events: initial;
+  opacity: 1;
+}
+
+.card * {
+  margin: 0;
+}
+
+.card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.main-content {
+  padding: 25px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.5s all;
+}
+
+.owner {
+  color: grey;
+  font-size: 110%;
+}
+
+.pet-name {
+  font-weight: bold;
+  font-size: 130%;
+}
+
+h5.pet-name {
+  color: white;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 10px;
+  text-shadow: 0px 0px 4px black;
+}
+
+.info ul {
+  padding: 10px;
+  padding-top: 0px;
+  border-radius: 7px;
+}
+
+li {
+  list-style-type: none;
+  margin: 0;
+}
+
+.info {
+  color: rgb(83, 83, 83);
+  position: relative;
+  overflow: hidden;
+}
+
+.info.likes {
+  margin-top: 25px;
+}
+
+.label {
+  font-weight: bold;
+}
+
+.btn-container {
+  text-align: right;
+  padding: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+.btn {
+  --accent: grey;
+  cursor: pointer;
+  background: transparent;
+  border: 1.5px solid var(--accent);
+  color: var(--accent);
+  border-radius: 10px;
+  padding: 10px 15px;
+  font-size: 90%;
+  letter-spacing: 1px;
+  transition: 0.5s all;
+  outline: none;
+}
+
+.btn:hover {
+  background: var(--accent);
+  color: white;
+}
+
+.edit.btn {
+  --accent: green;
+}
+
+.delete.btn {
+  --accent: red;
+  margin-left: 10px;
+}
+
+.view.btn {
+  --accent: blue;
+  margin-left: 10px;
+}
+
+/* Delete Pet */
+.pet-container {
+  width: 100%;
+}
+
+.confirmation-box.show {
+  display: block;
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/lib/dbConnect.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/lib/dbConnect.js
new file mode 100644
index 0000000..6b723b4
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/lib/dbConnect.js
@@ -0,0 +1,40 @@
+import mongoose from "mongoose";
+
+const MONGODB_URI = process.env.MONGODB_URI;
+
+if (!MONGODB_URI) {
+  throw new Error(
+    "Please define the MONGODB_URI environment variable inside .env.local"
+  );
+}
+
+/**
+ * Global is used here to maintain a cached connection across hot reloads
+ * in development. This prevents connections growing exponentially
+ * during API Route usage.
+ */
+let cached = global.mongoose;
+
+if (!cached) {
+  cached = global.mongoose = { conn: null, promise: null };
+}
+
+async function dbConnect() {
+  if (cached.conn) {
+    return cached.conn;
+  }
+
+  if (!cached.promise) {
+    const opts = {
+      bufferCommands: false,
+    };
+
+    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+      return mongoose;
+    });
+  }
+  cached.conn = await cached.promise;
+  return cached.conn;
+}
+
+export default dbConnect;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/models/Pet.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/models/Pet.js
new file mode 100644
index 0000000..ccde695
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/models/Pet.js
@@ -0,0 +1,59 @@
+import mongoose from "mongoose";
+
+/* PetSchema will correspond to a collection in your MongoDB database. */
+const PetSchema = new mongoose.Schema({
+  name: {
+    /* The name of this pet */
+
+    type: String,
+    required: [true, "Please provide a name for this pet."],
+    maxlength: [60, "Name cannot be more than 60 characters"],
+  },
+  owner_name: {
+    /* The owner of this pet */
+
+    type: String,
+    required: [true, "Please provide the pet owner's name"],
+    maxlength: [60, "Owner's Name cannot be more than 60 characters"],
+  },
+  species: {
+    /* The species of your pet */
+
+    type: String,
+    required: [true, "Please specify the species of your pet."],
+    maxlength: [40, "Species specified cannot be more than 40 characters"],
+  },
+  age: {
+    /* Pet's age, if applicable */
+
+    type: Number,
+  },
+  poddy_trained: {
+    /* Boolean poddy_trained value, if applicable */
+
+    type: Boolean,
+  },
+  diet: {
+    /* List of dietary needs, if applicable */
+
+    type: Array,
+  },
+  image_url: {
+    /* Url to pet image */
+
+    required: [true, "Please provide an image url for this pet."],
+    type: String,
+  },
+  likes: {
+    /* List of things your pet likes to do */
+
+    type: Array,
+  },
+  dislikes: {
+    /* List of things your pet does not like to do */
+
+    type: Array,
+  },
+});
+
+export default mongoose.models.Pet || mongoose.model("Pet", PetSchema);
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/next.config.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/next.config.js
new file mode 100644
index 0000000..3e1a8fb
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/next.config.js
@@ -0,0 +1,12 @@
+const { join } = require("path");
+
+const { createNodeFileTrace } = require("../..");
+
+module.exports = createNodeFileTrace({
+  path: join(__dirname, "..", "..", "..", "..", "target", "debug"),
+})({
+  reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+});
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/package.json b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/package.json
new file mode 100644
index 0000000..0d37857
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@vercel/turbo-tracing-test-app",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "cross-env MONGODB_URI=localhost:27017 next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "mongoose": "^6.4.5",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@vercel/experimental-nft-next-plugin": "workspace:*",
+    "cross-env": "^7.0.3"
+  }
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/edit.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/edit.js
new file mode 100644
index 0000000..85a1cf9
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/edit.js
@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Form from "../../components/Form";
+
+const fetcher = (url) =>
+  fetch(url)
+    .then((res) => res.json())
+    .then((json) => json.data);
+
+const EditPet = () => {
+  const router = useRouter();
+  const { id } = router.query;
+  const { data: pet, error } = useSWR(id ? `/api/pets/${id}` : null, fetcher);
+
+  if (error) return <p>Failed to load</p>;
+  if (!pet) return <p>Loading...</p>;
+
+  const petForm = {
+    name: pet.name,
+    owner_name: pet.owner_name,
+    species: pet.species,
+    age: pet.age,
+    poddy_trained: pet.poddy_trained,
+    diet: pet.diet,
+    image_url: pet.image_url,
+    likes: pet.likes,
+    dislikes: pet.dislikes,
+  };
+
+  return <Form formId="edit-pet-form" petForm={petForm} forNewPet={false} />;
+};
+
+export default EditPet;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/index.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/index.js
new file mode 100644
index 0000000..13b3a2b
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/[id]/index.js
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import dbConnect from "../../lib/dbConnect";
+import Pet from "../../models/Pet";
+
+/* Allows you to view pet card info and delete pet card*/
+const PetPage = ({ pet }) => {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const handleDelete = async () => {
+    const petID = router.query.id;
+
+    try {
+      await fetch(`/api/pets/${petID}`, {
+        method: "Delete",
+      });
+      router.push("/");
+    } catch (error) {
+      setMessage("Failed to delete the pet.");
+    }
+  };
+
+  return (
+    <div key={pet._id}>
+      <div className="card">
+        <img src={pet.image_url} />
+        <h5 className="pet-name">{pet.name}</h5>
+        <div className="main-content">
+          <p className="pet-name">{pet.name}</p>
+          <p className="owner">Owner: {pet.owner_name}</p>
+
+          {/* Extra Pet Info: Likes and Dislikes */}
+          <div className="likes info">
+            <p className="label">Likes</p>
+            <ul>
+              {pet.likes.map((data, index) => (
+                <li key={index}>{data} </li>
+              ))}
+            </ul>
+          </div>
+          <div className="dislikes info">
+            <p className="label">Dislikes</p>
+            <ul>
+              {pet.dislikes.map((data, index) => (
+                <li key={index}>{data} </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="btn-container">
+            <Link href="/[id]/edit" as={`/${pet._id}/edit`}>
+              <button className="btn edit">Edit</button>
+            </Link>
+            <button className="btn delete" onClick={handleDelete}>
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+      {message && <p>{message}</p>}
+    </div>
+  );
+};
+
+export async function getServerSideProps({ params }) {
+  await dbConnect();
+
+  const pet = await Pet.findById(params.id).lean();
+  pet._id = pet._id.toString();
+
+  return { props: { pet } };
+}
+
+export default PetPage;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/_app.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/_app.js
new file mode 100644
index 0000000..034d020
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/_app.js
@@ -0,0 +1,36 @@
+import "../css/style.css";
+import "../css/form.css";
+import Head from "next/head";
+import Link from "next/link";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>Pet Care App</title>
+      </Head>
+
+      <div className="top-bar">
+        <div className="nav">
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+          <Link href="/new">
+            <a>Add Pet</a>
+          </Link>
+        </div>
+
+        <img
+          id="title"
+          src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Pet_logo_with_flowers.png"
+          alt="pet care logo"
+        ></img>
+      </div>
+      <div className="grid wrapper">
+        <Component {...pageProps} />
+      </div>
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/[id].js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/[id].js
new file mode 100644
index 0000000..1f180dd
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/[id].js
@@ -0,0 +1,56 @@
+import dbConnect from "../../../lib/dbConnect";
+import Pet from "../../../models/Pet";
+
+export default async function handler(req, res) {
+  const {
+    query: { id },
+    method,
+  } = req;
+
+  await dbConnect();
+
+  switch (method) {
+    case "GET" /* Get a model by its ID */:
+      try {
+        const pet = await Pet.findById(id);
+        if (!pet) {
+          return res.status(400).json({ success: false });
+        }
+        res.status(200).json({ success: true, data: pet });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+
+    case "PUT" /* Edit a model by its ID */:
+      try {
+        const pet = await Pet.findByIdAndUpdate(id, req.body, {
+          new: true,
+          runValidators: true,
+        });
+        if (!pet) {
+          return res.status(400).json({ success: false });
+        }
+        res.status(200).json({ success: true, data: pet });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+
+    case "DELETE" /* Delete a model by its ID */:
+      try {
+        const deletedPet = await Pet.deleteOne({ _id: id });
+        if (!deletedPet) {
+          return res.status(400).json({ success: false });
+        }
+        res.status(200).json({ success: true, data: {} });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+
+    default:
+      res.status(400).json({ success: false });
+      break;
+  }
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/index.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/index.js
new file mode 100644
index 0000000..20b7cf0
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/api/pets/index.js
@@ -0,0 +1,32 @@
+import dbConnect from "../../../lib/dbConnect";
+import Pet from "../../../models/Pet";
+
+export default async function handler(req, res) {
+  const { method } = req;
+
+  await dbConnect();
+
+  switch (method) {
+    case "GET":
+      try {
+        const pets = await Pet.find({}); /* find all the data in our database */
+        res.status(200).json({ success: true, data: pets });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+    case "POST":
+      try {
+        const pet = await Pet.create(
+          req.body
+        ); /* create a new model in the database */
+        res.status(201).json({ success: true, data: pet });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+    default:
+      res.status(400).json({ success: false });
+      break;
+  }
+}
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/index.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/index.js
new file mode 100644
index 0000000..0f8d748
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/index.js
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import dbConnect from "../lib/dbConnect";
+import Pet from "../models/Pet";
+
+const Index = ({ pets }) => (
+  <>
+    {/* Create a card for each pet */}
+    {pets.map((pet) => (
+      <div key={pet._id}>
+        <div className="card">
+          <img src={pet.image_url} />
+          <h5 className="pet-name">{pet.name}</h5>
+          <div className="main-content">
+            <p className="pet-name">{pet.name}</p>
+            <p className="owner">Owner: {pet.owner_name}</p>
+
+            {/* Extra Pet Info: Likes and Dislikes */}
+            <div className="likes info">
+              <p className="label">Likes</p>
+              <ul>
+                {pet.likes.map((data, index) => (
+                  <li key={index}>{data} </li>
+                ))}
+              </ul>
+            </div>
+            <div className="dislikes info">
+              <p className="label">Dislikes</p>
+              <ul>
+                {pet.dislikes.map((data, index) => (
+                  <li key={index}>{data} </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="btn-container">
+              <Link href="/[id]/edit" as={`/${pet._id}/edit`}>
+                <button className="btn edit">Edit</button>
+              </Link>
+              <Link href="/[id]" as={`/${pet._id}`}>
+                <button className="btn view">View</button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    ))}
+  </>
+);
+
+/* Retrieves pet(s) data from mongodb database */
+export async function getServerSideProps() {
+  await dbConnect();
+
+  /* find all the data in our database */
+  const result = await Pet.find({});
+  const pets = result.map((doc) => {
+    const pet = doc.toObject();
+    pet._id = pet._id.toString();
+    return pet;
+  });
+
+  return { props: { pets: pets } };
+}
+
+export default Index;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/new.js b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/new.js
new file mode 100644
index 0000000..6d8cc30
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/pages/new.js
@@ -0,0 +1,19 @@
+import Form from "../components/Form";
+
+const NewPet = () => {
+  const petForm = {
+    name: "",
+    owner_name: "",
+    species: "",
+    age: 0,
+    poddy_trained: false,
+    diet: [],
+    image_url: "",
+    likes: [],
+    dislikes: [],
+  };
+
+  return <Form formId="add-pet-form" petForm={petForm} />;
+};
+
+export default NewPet;
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/favicon.ico b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/favicon.ico
new file mode 100644
index 0000000..4965832
Binary files /dev/null and b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/favicon.ico differ
diff --git a/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/zeit.svg b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/zeit.svg
new file mode 100644
index 0000000..dd3916c
--- /dev/null
+++ b/packages/turbo-tracing-next-plugin/test/with-mongodb-mongoose/public/zeit.svg
@@ -0,0 +1,10 @@
+<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
+    <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
+    <defs>
+        <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff"/>
+            <stop offset="1"/>
+        </linearGradient>
+    </defs>
+</svg>
-- 
cgit v1.2.3-70-g09d2