Social Networking Platform using Next.js

The Social Networking Platform built with NextJS is a web application that provides users the functionality to add a post, like a post, and be able to comment on it. The power of NextJS, a popular React framework for building server-side rendered (SSR) and statically generated web applications, this platform offers a seamless user experience with fast loading times and smooth navigation.

Output Preview: Let us have a look at how the final output will look like

👁 Screenshot-2024-03-20-000330

Prerequisites:

• NPM & NodeJS
• NextJS
• ReactJS
• MongoDB

Approach to Create Social Networking Platform with NextJS:

• Home Page: Displays recent posts fetched from the backend API.
• Post Interaction: Users can like posts and add comments.
• Create Post: Users can create new posts with a title, content, and optional image upload.
• Backend API: Provides endpoints for fetching recent posts, creating posts, liking posts, and adding comments. Uses MongoDB as the database.

Steps to Create the NextJS App:

Step 1: Set up a NextJS project using the following command.

npx create-next-app next-mern-project
cd next-mern-project

Step 2: Install required dependencies.

npm install axios mongoose 

Project Structure:

👁 Screenshot-2024-03-19-235202

The updated dependencies in package.json file will look like:

 "dependencies": {
 "axios": "^1.6.8",
 "mongodb": "^6.5.0",
 "mongoose": "^8.2.2",
 "multer": "^1.4.5-lts.1",
 "next": "14.1.3",
 "next-connect": "^1.0.0",
 "react": "^18",
 "react-dom": "^18",
 "uuid": "^9.0.1"
 }

Step 3: Creating a required files.

• Create components folder with Post.js
• Inside api create file posts.js
• inside pages create file _app.js,index.js and create.js
• create globals.css inside style folder

Example: Below is an example of creating a Social Networking Platform with NextJS.

Start your application using the following command.

npm run dev

Output:

👁 aa

Database records:

👁 Screenshot-2024-03-20-000736