Build and Deploy a Full Stack App Using Next.js 14 – Complete Course for 2024

In this tutorial, we will walk through how to build and deploy a full stack app using the Next.js 14 framework. Next.js is a popular React framework that allows you to build server-side rendered and static websites with ease. With the release of Next.js 14, there are many new features and improvements that make it even easier to build and deploy full stack apps.

Here’s what we will cover in this tutorial:

1. Setting up a new Next.js 14 project
2. Creating a frontend with React components
3. Setting up a backend with an API
4. Connecting the frontend and backend
5. Deploying the app to the cloud

Let’s get started!

Setting up a new Next.js 14 project

To begin, make sure you have Node.js installed on your machine. You can download it from the official Node.js website.

Next, open your terminal and run the following command to install the Next.js CLI globally on your machine:

npm install -g create-next-app

Next, create a new Next.js project by running the following commands:

npx create-next-app@14 my-fullstack-app
cd my-fullstack-app

This will create a new Next.js project with all the necessary files and dependencies. Now, you can run the development server by running:

npm run dev

You should see your app running on http://localhost:3000.

Creating a frontend with React components

Next, let’s create a simple frontend for our app using React components. Open the pages/index.js file and replace the content with the following code:

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my full stack app!</h1>
    </div>
  );
};

export default Home;

This code will create a simple homepage for your app. You can add more components and pages as needed to build out your frontend.

Setting up a backend with an API

Next, let’s set up a backend for our app by creating an API. Create a new api folder in the root of your project and create a new file called hello.js. In this file, add the following code:

export default (req, res) => {
  res.statusCode = 200;
  res.json({ message: 'Hello from the API!' });
};

This code will create a simple API endpoint that returns a JSON response with a message. You can add more endpoints and logic as needed to build out your backend.

Connecting the frontend and backend

To connect the frontend and backend, we can use the fetch API in our React components. Update the pages/index.js file with the following code:

import React, { useEffect, useState } from 'react';

const Home = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/hello')
      .then(res => res.json())
      .then(data => {
        setMessage(data.message);
      });
  }, []);

  return (
    <div>
      <h1>Welcome to my full stack app!</h1>
      <p>{message}</p>
    </div>
  );
};

export default Home;

This code will make a request to the API endpoint we created earlier and display the response message on the homepage of our app.

Deploying the app to the cloud

To deploy our app to the cloud, we can use platforms like Vercel, which provide seamless deployment for Next.js apps. First, create a Vercel account and install the Vercel CLI by running the following command:

npm install -g vercel

Next, run the following command to deploy your app to Vercel:

vercel

Follow the prompts to deploy your app to Vercel. Once deployed, you can access your app using the provided URL.

Congratulations! You have successfully built and deployed a full stack app using the Next.js 14 framework. Feel free to customize and expand on this app to learn more about Next.js and full stack development.