Next.JS full-stack development

Step 1: Setting Up the Development Environment

1. 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.
2. 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”.

3. 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

1. Install Nest.js CLI: Install the Nest.js CLI globally by running the following command:

npm install -g @nestjs/cli

2. 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.

3. 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

1. 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 named index.js with the following content:

import React from 'react';

function HomePage() {
  return <h1>Welcome to my Next.js App!</h1>;
}

export default HomePage;

2. 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

1. Modify the Front-end API Calls: Update the index.js file to fetch data from the Nest.js backend API. Replace the existing content of index.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.

2. 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.

3. Update the app.service.ts File: Modify the app.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.

4. 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.