React

Next.js – The React Framework for the Web

https://nextjs.org

Prerequisites

• Node.js 18.18 or later

Create a new app

npx create-next-app@latest

Create Frontend Directories

cd myapp/src/
mkdir components
cd components/
mkdir ui

Test – Run the development server

1. cd my-app/
2. Run npm run dev to start the development server.
3. Visit http://localhost:3000 to view your application.

Install Backend Dependencies

cd my-app/
npm install express dotenv cors node-fetch

• Express.js – framework for backend
• dotenv – for environment variables
• cors – for handling CORS
• node-fetch – to make HTTP requests

Create Backend Server Directory and Files

mkdir server
cd server/
touch index.js
touch <some-name>.env
touch <some-name>.gitignore

Configure Express Backend (index.js) and Environment Variables (.env)

Run Backend

node server/index.js

http://localhost:4000

Run Frontend

npm run dev

http://localhost:3000

Optional: Run Both Simultaneously

Install the concurrently pacakge:

npm install concurrently --save-dev

Then update package.json:

{
  "scripts": {
    "dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\"",
    "dev:frontend": "next dev",
    "dev:backend": "node server/index.js"
  }
}

Now both can be run with:

npm run dev