Step 1: Setting Up the Development Environment
- Install Node.js: Ensure that you have Node.js installed on your machine. You can download it from the official Node.js website (https://nodejs.org) and follow the installation instructions.
- Create a New Next.js Project: Open your terminal and navigate to the desired directory where you want to create your project. Run the following command to create a new Next.js project:
npx create-next-app my-next-app
This will set up a new Next.js project with the name “my-next-app”.
- Navigate to the Project Directory: Move into the project directory using the following command:
cd my-next-app
Step 2: Setting Up the Nest.js Backend
- Install Nest.js CLI: Install the Nest.js CLI globally by running the following command:
npm install -g @nestjs/cli
- Create a New Nest.js Application: Run the following command to create a new Nest.js application inside the Next.js project directory:
nest new server
This will create a new folder named “server” that contains the Nest.js backend application.
- Folder Structure:
The recommended folder structure for a Nest.js application is as follows:
server
├── src
│ ├── main.ts
│ ├── app.module.ts
│ ├── app.controller.ts
│ └── app.service.ts
- The
src
the directory contains the source code for your Nest.js application. - The
main.ts
file is the entry point of the application. - The
app.module.ts
file defines the main module of your application. - The
app.controller.ts
file handles HTTP requests and defines the API routes. - The
app.service.ts
file contains the business logic for your application.
Step 3: Building the Front-end with Next.js
- Create a New Page: Next.js uses a pages directory to define the routes of your application. Inside the
pages
directory of your Next.js project, create a new file namedindex.js
with the following content:
import React from 'react';
function HomePage() {
return <h1>Welcome to my Next.js App!</h1>;
}
export default HomePage;
- Start the Development Server: Run the following command to start the Next.js development server:
npm run dev
This will start the server, and you can access your application at http://localhost:3000. You should see the “Welcome to my Next.js App!” message displayed.
Step 4: Integrating the Backend with the Front-end
- Modify the Front-end API Calls: Update the
index.js
file to fetch data from the Nest.js backend API. Replace the existing content ofindex.js
with the following code:
import React, { useEffect, useState } from 'react';
function HomePage() {
const [data, setData] = useState('');
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const res = await fetch('/api/data');
const result = await res.json();
setData(result.data);
};
return (
<div>
<h1>Welcome to my Next.js App!</h1>
<p>Data: {data}</p>
</div>
);
}
export default HomePage;
This code fetches data from the /api/data
endpoint of the Next.js application.
- Create an API Endpoint in Nest.js: Update the
app.controller.ts
file in the Nest.js application with the following code:
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
@Controller('api')
export class AppController {
constructor(private readonly appService: AppService) {}
@Get('data')
getData(): string {
return this.appService.getData();
}
}
This code creates an API endpoint at /api/data
that calls the getData
method of the AppService
class.
- Update the
app.service.ts
File: Modify theapp.service.ts
file in the Nest.js application to include the following code:
import { Injectable } from '@nestjs/common';
@Injectable()
export class AppService {
getData(): string {
return 'Hello from Nest.js!';
}
}
This code defines the getData
method, which returns a simple string.
- Restart the Development Servers: Stop the current Next.js development server and the Nest.js server by pressing Ctrl+C in the terminal. Then start them again using the following commands:
For Next.js:
npm run dev
For Nest.js (inside the server
directory):
npm run start
Now, when you access http://localhost:3000 in your browser, you should see the “Welcome to my Next.js App!” message along with the data fetched from the Nest.js backend.