Published on

How to Set Up a Next.js Project on a Home Server

Setting up a Next.js project on a home server takes about 15 to 20 minutes using modern tools like Node.js 22 and Next.js 15. By installing the core environment, initializing a new application, and configuring a local network port, you can transform an old laptop or a dedicated server into a private web hosting platform. This setup allows you to build and test high-performance React applications without paying monthly cloud hosting fees.

What you will need to get started?

Before starting, ensure your home server is running a Linux-based operating system like Ubuntu 24.04, though these steps also work on Windows or macOS. You will need a stable internet connection for the initial installation and basic familiarity with the command line (a text-based interface for giving instructions to your computer).

  1. Node.js (Version 20.x or 22.x): The environment that runs JavaScript code outside of a web browser.
  2. npm (Node Package Manager): A tool that comes with Node.js to install libraries and frameworks.
  3. A Code Editor: While you can edit files on the server, using VS Code on your main computer to connect remotely is often easier.
  4. Terminal Access: You should be able to SSH (Secure Shell - a way to securely connect to another computer over a network) into your server.

How do you install the environment on your server?

The first step is preparing the server to understand the code you are about to write. Most home servers do not come with the latest version of Node.js pre-installed.

Step 1: Update your system packages. Open your terminal and run the following command to ensure all your current software is up to date.

# Update the list of available packages
sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js. We recommend using a version manager or the official NodeSource repository to get the latest stable version. As of 2026, Node.js 22 is a great choice for stability and speed.

# Download and install Node.js 22
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

Step 3: Verify the installation. Check that everything is working by asking the server for the version numbers.

# Check Node version
node -v
# Check npm version
npm -v

What you should see: The terminal should return version numbers like v22.x.x and 10.x.x. Don't worry if the exact minor numbers are different; as long as the main version matches, you are ready.

How do you create the Next.js project?

Next.js 15 uses a helpful tool called create-next-app that handles all the difficult configuration for you. You do not need to manually create folders or setup build scripts.

Step 1: Run the initialization script. Navigate to the folder where you want your project to live and run this command:

# Start the setup wizard
npx create-next-app@latest my-home-site

Step 2: Choose your settings. The installer will ask you a series of questions. For a beginner-friendly experience, we recommend these settings:

  • TypeScript? Yes (it helps catch errors early).
  • ESLint? Yes (it keeps your code clean).
  • Tailwind CSS? Yes (it makes styling your site much faster).
  • src/ directory? Yes (it keeps your project organized).
  • App Router? Yes (this is the modern way to handle pages).
  • Import Alias? Yes (just press Enter to accept the default @/*).

Step 3: Enter the project folder. Move into the new directory created by the script.

cd my-home-site

What you should see: A list of files including package.json, next.config.js, and a src folder. This means your project structure is successfully built.

How do you run the site on your local network?

By default, Next.js only listens to requests coming from the "localhost" (the server itself). To see your site from your phone or laptop, you must tell the server to listen to all devices on your home network.

Open the package.json file in your editor and look for the "scripts" section. You need to change the "dev" line so it includes -H 0.0.0.0.

// Find this section in package.json
"scripts": {
  "dev": "next dev -H 0.0.0.0",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Now, start the development server by running npm run dev. You can now find your server's IP address by typing hostname -I in a new terminal window.

Open a browser on your laptop and type that IP address followed by :3000 (for example, http://192.168.1.50:3000). You should see the default Next.js welcome page.

How do you make the site run permanently?

If you close your terminal window, your website will stop working. To keep it running even after you log out or if the server restarts, you should use a process manager called PM2.

First, install PM2 globally on your server. This tool acts like a bodyguard for your application, restarting it if it ever crashes.

# Install PM2
sudo npm install -g pm2

# Build your project for production
npm run build

# Start the app with PM2
pm2 start npm --name "my-next-app" -- start

To ensure the app starts automatically when the server reboots, run pm2 startup and follow the instructions on the screen. Finally, type pm2 save to lock in your settings.

We've found that using PM2 is much more reliable than trying to manage background tasks manually. It provides a simple dashboard where you can see how much memory your site is using.

How can you use AI to help build your site?

Building a site is much faster in 2026 thanks to advanced AI models. You can use Claude Sonnet 4 or GPT-5 to write specific components or debug errors you encounter.

Simply copy an error message from your terminal and paste it into the AI chat. Ask it to "Explain this Next.js error to a beginner and provide a fix."

These models are also excellent at generating UI components. You can ask for a "Responsive navigation bar using Tailwind CSS and React 19 hooks," and it will provide the code you need.

Always remember to read the code the AI provides before pasting it. It is normal to feel overwhelmed by new code, so ask the AI to add comments explaining what each line does.

Common Gotchas and Troubleshooting

If you cannot see your site from another device, the most common culprit is a Firewall (a security system that blocks network traffic). You may need to allow traffic on port 3000.

On Ubuntu, you can fix this by running sudo ufw allow 3000. This tells the operating system that it is safe to let other computers talk to your Next.js app.

Another common mistake is forgetting to run npm run build after making changes in production mode. Next.js needs to compile (translate your code into a faster version) before the changes become visible on the "start" command.

If your server runs out of memory during the build process, try adding a swap file. A swap file acts as extra "virtual" memory using your hard drive space, which is very helpful on low-power devices like a Raspberry Pi.

Next Steps

Now that your server is live, you can start customizing the page.tsx file inside the src/app folder. Try changing the text and saving the file to see how the site updates instantly.

Once you are comfortable with local hosting, you might want to look into "Reverse Proxies" like Nginx. This allows you to use a real domain name (like mysite.com) instead of an IP address.

You should also explore how to connect a database to your home server. This will allow you to save user data or blog posts directly on your own hardware.

For detailed guides, visit the official Next.Js documentation.

Read the Next.js Documentation