{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/working-with-api-in-nextjs/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"90623196-5c56-5c0d-893a-95ae900c3e8c","excerpt":"In this tutorial i will teach how you can build API using MongoDB with Next.js step by step Step 1 Create required folder for the api Create a folder name…","html":"

In this tutorial i will teach how you can build API using MongoDB with Next.js step by step

\n

Step 1 Create required folder for the api

\n

Create a folder name /pages/api and inside the api folder create file index.js or any other name of your choice page name will be your api routes

\n

For example:\nIf you have created a file with the name index.js then your api routes will be\nhttp://localhost:3000/api

\n

If you have create a file with the name feedback.js then your api routes will be\nhttp://localhost:3000/api/feedback

\n

Step 2 Writing API function in the API routes file

\n

Inside the index.js or feedback.js file which we have created above in first step we need to write handler function in order to handle api request

\n

We need to write following function code inside our api files

\n
function handler(req, res) {\n  //You can write your api logics here\n  res.status(200).json({ message: \"This api works\" });\n}\n\nexport default handler;\n
\n

Step 3 Creating API Routes with params

\n

You need to create folder structure like pages/api/feedback/[feedbackid].js and here feedbackid will be your dynamic parameter which you will get in your handler function

\n

You will hit the api like

\n

http://localhost:3000/api/feedback/1234

\n

Here 1234 is dynamic feedback id which you can recieve in req inside your handler function using req.query.feedbackid

\n
function handler(req, res) {\n  console.log(req.query.feedbackid);\n  //You can write your api logics here\n  res.status(200).json({ message: \"This api works\" });\n}\n\nexport default handler;\n
\n

Step 4 Integrating MongoDB

\n\n
npm i mongodb --save\n
\n\n

In order to connect to mongodb inside your api routes file you need to add following piece of code

\n
import { MongoClient } from \"mongodb\";\nconst url = \"mongodb://localhost:27017\";\nconst client = new MongoClient(url);\nconst dbName = \"myProject\";\n\nasync function mongoconnection() {\n  await client.connect();\n  return \"done\";\n}\n\nfunction handler(req, res) {\n  mongoconnection()\n    .then(async () => {\n      const db = client.db(dbName);\n      const collection = db.collection(\"documents\");\n      await collection.insertMany([{ a: 1 }, { a: 2 }, { a: 3 }]);\n      res.status(200).json({ message: \"This api works\" });\n    })\n    .catch((error) => {\n      console.log(\"Error\", error);\n    })\n    .finally(() => client.close());\n}\n\nexport default handler;\n
","fields":{"slug":"/working-with-api-in-nextjs/"},"frontmatter":{"title":"Working on API using MongoDB with NextJS","date":"June 25, 2023","description":"In this article i will explain you how you can create API using MongoDb with NextJS","bannerimage":"https://metacognitive.me/wp-content/uploads/2024/06/1_7IFWIqKtcdK7KOoMAopLqQ.png"}},"previous":{"fields":{"slug":"/web-component-javascript/"},"frontmatter":{"title":"Creating web component in javascript","date":"June 11, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/web-component.jpeg"}},"next":{"fields":{"slug":"/working-with-react-and-aws-amplify/"},"frontmatter":{"title":"Working with react and Aws amplify","date":"July 01, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-amplify.jpeg"}}},"pageContext":{"id":"90623196-5c56-5c0d-893a-95ae900c3e8c","previousPostId":"d4aefb01-f69c-5a6f-a0de-824fe424b563","nextPostId":"604753d1-361a-56bf-972f-213f8f70175a"}}, "staticQueryHashes": ["3860684146"]}