In the ever-evolving landscape of web development, being proficient in full-stack frameworks is an invaluable skill. Today, we will explore how to set up a full-stack application using Next.js, React\u2019s powerful framework, paired with MongoDB, a NoSQL database known for its scalability and flexibility. Whether you’re a beginner or an experienced developer seeking to enhance your skills, this guide will walk you through each step of the process.<\/p>\n
Next.js offers several features that make it an excellent choice for developing modern web applications:<\/p>\n
Before we start, ensure you have the following set up:<\/p>\n
Now that you have the necessary tools, let’s set up our Next.js project.<\/p>\n
Open your terminal and run the following command:<\/p>\n
npx create-next-app my-fullstack-app<\/code><\/pre>\nThis command creates a new directory called my-fullstack-app<\/strong> containing all the boilerplate code needed for a Next.js application. Navigate into the directory:<\/p>\ncd my-fullstack-app<\/code><\/pre>\n2. Install Necessary Packages<\/h3>\n
To connect to MongoDB, you will need the mongodb<\/strong> driver:<\/p>\nnpm install mongodb<\/code><\/pre>\n3. Create a MongoDB Database<\/h3>\n
If you’re using MongoDB Atlas, follow these steps:<\/p>\n
\n- Create a free cluster on MongoDB Atlas.<\/li>\n
- Set up a new database and a collection (e.g., users<\/strong>).<\/li>\n
- Whitelist your IP address to allow connections.<\/li>\n
- Get the connection string from the MongoDB dashboard.<\/li>\n<\/ul>\n
If you\u2019re running MongoDB locally, you can skip the cluster setup, as it defaults to running at mongodb:\/\/localhost:27017<\/strong>.<\/p>\nBuilding the API with Next.js<\/h2>\n
Next.js simplifies the creation of API routes, enabling you to handle server-side logic alongside your frontend.<\/p>\n
1. Creating an API Route<\/h3>\n
In your Next.js app, navigate to the pages\/api<\/strong> directory and create a new file called users.js<\/strong>:<\/p>\ntouch pages\/api\/users.js<\/code><\/pre>\nOpen users.js<\/strong> and implement the code below to handle GET and POST requests:<\/p>\nimport { MongoClient } from 'mongodb';\n\nconst uri = 'YOUR_MONGODB_CONNECTION_STRING';\nconst client = new MongoClient(uri);\n\nexport default async function handler(req, res) {\n if (req.method === 'GET') {\n try {\n await client.connect();\n const database = client.db('myDatabase');\n const collection = database.collection('users');\n const users = await collection.find({}).toArray();\n res.status(200).json(users);\n } finally {\n await client.close();\n }\n } else if (req.method === 'POST') {\n try {\n const newUser = req.body;\n await client.connect();\n const database = client.db('myDatabase');\n const collection = database.collection('users');\n const result = await collection.insertOne(newUser);\n res.status(201).json(result);\n } finally {\n await client.close();\n }\n } else {\n res.status(405).json({ message: 'Method not allowed' });\n }\n}<\/code><\/pre>\nIn this example, we connect to the MongoDB database and handle both GET<\/strong> and POST<\/strong> requests for the users collection.<\/p>\nBuilding the Frontend<\/h2>\n
With your API set up, let\u2019s create a simple frontend that allows users to view and add new entries.<\/p>\n
1. Creating a User Interface<\/h3>\n
Open the pages\/index.js<\/strong> file and replace its content with the following code:<\/p>\nimport { useEffect, useState } from 'react';\n\nexport default function Home() {\n const [users, setUsers] = useState([]);\n const [name, setName] = useState('');\n\n const fetchUsers = async () => {\n const response = await fetch('\/api\/users');\n const data = await response.json();\n setUsers(data);\n };\n\n const addUser = async (e) => {\n e.preventDefault();\n if (name) {\n await fetch('\/api\/users', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({ name }),\n });\n setName('');\n fetchUsers();\n }\n };\n\n useEffect(() => {\n fetchUsers();\n }, []);\n\n return (\n \n User List<\/h1>\n \n {users.map((user) => (\n - {user.name}<\/li>\n ))}\n <\/ul>\n \n setName(e.target.value)}\n placeholder=\"Enter name\"\n required\n \/>\n