Build a Next.js CRUD App in MongoDB With Routing in Browser Using Javascript Full Project

  • Post author:
  • Post category:Next
  • Post comments:0 Comments

 

 

npx create-next-app crud

 

 

cd crud

 

 

npm i mongodb

 

 

 

Connecting to MongoDB

 

 

First of all create a env file inside the root directory of your next.js project and copy paste the below config code

 

 

 

 

Here you need to replace the database name and also the mongodb address

 

 

And after this guys you need to copy paste the code in index.js file of your next.js page

 

 

index.js

 

 

 

 

And now you need to create another add_post page this time to add a new post

 

 

add-post.js

 

 

 

 

And now inside the api folder of your next.js app you need to create posts.js file and copy paste the code

 

 

posts.js

 

 

 

 

And also create a lib folder and inside it make a mongodb.js file and copy paste the below code to connect to mongodb database

 

 

lib/mongodb.js

 

 

 

 

Creating Components

 

 

We will have two components for this app

 

navbar

 

First of all create a components folder inside the root directory and create a Nav.js file and copy paste the below code

 

 

components/Nav.js

 

 

 

 

PostCard Component

 

 

In this component we will be showing the details of the Post component

 

 

components/PostCard.js

 

 

 

 

Styling the App

 

 

And lastly for the styling you can go to styles folder of next.js project and inside it make a new file called Nav.module.css file and copy

 

paste the below code

 

 

 

 

Home.module.css

 

 

 

 

npm run dev

 

Leave a Reply