How to Install Next.js in Ubuntu 24.04: 5 Easy Steps

Next.js is a powerful React framework that enables developers to build server-side rendering (SSR) and static web applications with ease. It offers a rich set of features, including automatic code splitting, optimized performance, and seamless integration with modern JavaScript tools. If you’re using Ubuntu 24.04 and want to harness the power of Next.js, this guide will walk you through the installation process step by step.

Prerequisites

Before diving into the installation process, ensure that your system meets the following requirements:

• Ubuntu 24.04: This guide is tailored for Ubuntu 24.04, but the steps should be similar for other versions of Ubuntu.
• Node.js and npm: Next.js is built on Node.js, so you’ll need to have Node.js and npm (Node Package Manager) installed on your system.
• Text Editor or IDE: You’ll need a text editor or an Integrated Development Environment (IDE) to write and edit your code. Popular choices include Visual Studio Code, Sublime Text, and Atom.
• Terminal: Familiarity with the terminal is essential, as most of the installation and setup will be done via command-line commands.

How to Install Next.js in Ubuntu 24.04

Step 1: Update Your System

Before installing any new software, it’s a good practice to update your system to ensure that all existing packages are up to date. Open your terminal and run the following commands:

sudo apt update
sudo apt upgrade

This will update the package list and upgrade any outdated packages on your system.

Step 2: Install Node.js and npm

Next.js requires Node.js and npm to be installed on your system. Ubuntu 24.04 may not come with the latest version of Node.js pre-installed, so you’ll need to install it manually.

Option 1: Install Node.js Using the NodeSource Repository

To install the latest stable version of Node.js, you can use the NodeSource repository. Follow these steps:

Add the NodeSource Repository: First, download and run the NodeSource setup script for the desired Node.js version. As of writing this guide, the latest LTS version is Node.js 18.x. Run the following commands:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

Install Node.js and npm: After adding the NodeSource repository, install Node.js and npm by running:

sudo apt-get install -y nodejs

Verify the Installation: To ensure that Node.js and npm were installed correctly, check their versions:

node -v
npm -v

You should see output similar to:

v18.x.x
8.x.x

Option 2: Install Node.js Using nvm (Node Version Manager)

If you prefer to manage multiple versions of Node.js on your system, you can use nvm (Node Version Manager). Here’s how:

Install nvm: Run the following command to install nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

After the installation is complete, close and reopen your terminal or run the following command to load nvm:

source ~/.bashrc

Install Node.js Using nvm: Once nvm is installed, you can install the latest LTS version of Node.js by running:

   nvm install --lts

Verify the Installation: Check the installed versions of Node.js and npm:

node -v
npm -v

You should see output similar to:

v18.x.x
8.x.x

Step 3: Install Next.js

With Node.js and npm installed, you’re now ready to install Next.js. There are two primary ways to create a Next.js project: using the create-next-app CLI tool or manually setting up a Next.js project.

Option 1: Using create-next-app

The create-next-app CLI tool is the easiest and fastest way to create a new Next.js project. It sets up everything automatically, including the necessary dependencies and project structure.

Install create-next-app: If you haven’t already installed create-next-app, you can do so globally by running:

npm install -g create-next-app

Create a New Next.js Project: To create a new Next.js project, run the following command:

npx create-next-app@latest my-next-app

Replace my-next-app with the desired name for your project. This command will create a new directory with the specified name and set up a new Next.js project inside it.

Navigate to the Project Directory: Once the project is created, navigate to the project directory:

cd my-next-app

Start the Development Server: To start the development server, run:

npm run dev

This will start the Next.js development server on http://localhost:3000. Open your web browser and navigate to this address to see your new Next.js app in action.

Option 2: Manual Setup

If you prefer to set up a Next.js project manually, follow these steps:

Initialize a New Node.js Project: Create a new directory for your project and initialize a new Node.js project:

mkdir my-next-app
cd my-next-app
npm init -y

This will create a package.json file with default settings.

Install Next.js, React, and React DOM: Install the necessary dependencies for a Next.js project:

npm install next react react-dom

Create the Project Structure: Next.js has a specific project structure that it expects. Create the following files and directories:

• pages/index.js: This will be the main page of your application.
• pages/_app.js: This is a custom App component that wraps all pages.
• public/: This directory will store static assets like images, fonts, etc. Here’s an example of what your pages/index.js file might look like:

export default function Home() {
   return (
     <div>
       <h1>Welcome to My Next.js App!</h1>
     </div>
   );
 }

And here’s an example of what your pages/_app.js file might look like:

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Add Scripts to package.json: Update your package.json file to include the necessary scripts for running and building your Next.js project:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Start the Development Server: Finally, start the development server by running:

npm run dev

Your Next.js app should now be running on http://localhost:3000.

Step 4: Configure Next.js (Optional)

Next.js is highly configurable, and you can customize it to suit your needs by creating a next.config.js file in the root of your project. This file allows you to modify various settings, such as webpack configuration, environment variables, and more.

Here’s an example of a basic next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['example.com'],
  },
};

module.exports = nextConfig;

This configuration enables React’s Strict Mode, enables SWC minification, and allows images from example.com to be optimized by Next.js.

Step 5: Deploy Your Next.js App (Optional)

Once your Next.js app is ready, you may want to deploy it to a production environment. Next.js supports various deployment options, including Vercel (the creators of Next.js), Netlify, and traditional server environments.

Deploying to Vercel

Vercel is the easiest way to deploy a Next.js app. Follow these steps:

Install the Vercel CLI: If you haven’t already, install the Vercel CLI globally:

npm install -g vercel

Deploy Your App: Navigate to your project directory and run:

vercel

Follow the prompts to deploy your app. Vercel will automatically detect that you’re using Next.js and configure the deployment accordingly.

Access Your Deployed App: Once the deployment is complete, Vercel will provide you with a URL where your app is live.

Deploying to a Custom Server

If you prefer to deploy your Next.js app to a custom server, you can build the app and serve it using Node.js or a process manager like PM2.

Build the App: Run the following command to build your Next.js app:

npm run build

Start the App: After building the app, start it in production mode:

npm start

This will start the app on the default port (usually 3000). You can use a reverse proxy like Nginx to serve the app on a custom domain.

Conclusion

Installing Next.js on Ubuntu 24.04 is a straightforward process that involves setting up Node.js, installing Next.js, and creating a new project. Whether you choose to use the create-next-app CLI tool or set up the project manually, Next.js provides a robust foundation for building modern web applications.

By following this guide, you should now have a fully functional Next.js environment on your Ubuntu 24.04 system. From here, you can start building your Next.js app, exploring its features, and deploying it to a production environment. Happy coding!

FAQs: How to Install Next.js on Ubuntu 24.04

npm install next@latest