Creating and Running a Next.js Project in ServBay

Overview

Next.js is a powerful React framework developed and maintained by Vercel, widely used for building modern, high-performance web applications. It extends React with a variety of out-of-the-box features, greatly simplifying the process of building complex applications for developers.

What is Next.js?

Next.js is a popular open-source React framework that supports multiple rendering strategies, including Server-Side Rendering (SSR) and Static Site Generation (SSG). These features help enhance performance, improve user experience, and optimize search engine visibility. Next.js comes with built-in features like file-system routing, API routes, code splitting, and CSS Modules support, providing an all-in-one development experience.

Key Features and Advantages of Next.js

• Multiple Rendering Strategies: Supports server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR), and hybrid rendering. Developers can select the most suitable mode based on their needs.
• File-System Routing: Automatically generates routes based on the pages or app directory structure for a straightforward setup.
• API Routes: Easily create your own API endpoints within a Next.js project, facilitating fullstack development.
• Automatic Code Splitting: Splits code at the page level, loading only the necessary JavaScript for the current page to optimize loading speeds.
• Optimized Image Component (next/image): Automatically optimizes image sizes, formats, and loading strategies for better performance.
• Built-in CSS and Sass Support: Manage and write styles with ease.
• Fast Refresh: Provides near-instant code updates during development for rapid feedback.

With Next.js, developers can efficiently build high-performance, scalable, and maintainable modern web applications.

Running a Next.js Project with ServBay

ServBay provides an integrated local web development environment, including Node.js and a variety of other languages and tools. By leveraging ServBay’s Node.js environment and Website management features (including reverse proxy and static file serving), you can easily create, develop, and deploy Next.js projects.

This article will guide you through creating a Next.js project in the ServBay environment, running it in development mode (using reverse proxy), and deploying it in production mode (using static file serving).

Prerequisites

Before you begin, please ensure you have completed the following:

1. ServBay has been successfully installed on your macOS system.
2. The required Node.js package is installed and enabled via ServBay's Package management interface. If Node.js is not yet installed, refer to the Using ServBay’s Node.js Environment documentation.

Steps

1. Create a Next.js Project

First, initialize a new Next.js project.

1. Open Terminal and switch to the default ServBay website root directory:

   cd /Applications/ServBay/www

2. Initialize the project using create-next-app: Run the following command to create a new Next.js project. It is recommended to name your project servbay-next-app, which will create a folder with the same name under /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx is a tool for executing Node.js package commands. create-next-app@latest uses the latest version of the Next.js initialization tool. Follow the terminal prompts to complete project setup (such as choosing whether to use TypeScript, ESLint, Tailwind CSS, App Router, etc.).

3. Enter the project directory and install dependencies:

   cd servbay-next-app
   npm install

   The npm install command installs all necessary project dependencies as defined in the project's package.json file.

2. Modify Project Output (Optional)

To verify that the project is running successfully, you can simply modify the homepage content.

1. Open the pages/index.js file (if you chose the Pages Router). If you’re using the App Router, modify app/page.js. Here we use the Pages Router as an example:

   # Use your preferred editor, for example, VS Code
   code pages/index.js

2. Edit the file so that the webpage displays "Hello ServBay!". Replace or modify the content as follows:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>This page is running via ServBay.</p>
       </div>
     );
   }

   If you are using the App Router (app/page.js), the file structure may differ slightly, but the main change—modifying the <h1> tag content—remains the same.

3. Enter Development Mode

During development, we typically use the Next.js development server, which supports hot module replacement (HMR) and fast refresh for instant feedback on code changes. ServBay’s reverse proxy feature is ideal for mapping a custom local domain to your locally running development server port.

1. Run the Next.js development server: In your project root (/Applications/ServBay/www/servbay-next-app), execute:

   npm run dev -- -p 8585

   This command starts the Next.js development server and, with the -- -p 8585 argument, makes it listen on local port 8585. You can choose any available port.

2. Configure a ServBay Website (Reverse Proxy): Open the ServBay app, go to Website management, and add a new website with the following settings:

   • Name: My first Next.js dev site (or any name you prefer)
   • Domain: servbay-next-dev.servbay.demo (it’s recommended to use the .servbay.demo suffix for local testing domains)
   • Website Type: Select Reverse Proxy
   • Proxy IP: 127.0.0.1 (points to the local loopback address)
   • Proxy Port: 8585 (the port your Next.js dev server is listening on)

   After configuring, save and apply your changes in ServBay. ServBay will automatically configure Caddy or Nginx (depending on your ServBay setup) to handle requests for servbay-next-dev.servbay.demo and forward them to 127.0.0.1:8585.

   For detailed steps, refer to the Adding a Node.js Development Website in ServBay documentation.

3. Access your development site: Open your browser and visit the configured domain: https://servbay-next-dev.servbay.demo.

   Since ServBay natively supports and automatically configures SSL certificates (using ServBay User CA) for local domains created within the app, you can securely access your local development website via HTTPS without browser warnings. ServBay also supports custom domains and free SSL certificates, which is extremely convenient for local development.

4. Build for Production and Deploy as a Static Site

When your Next.js project is complete and ready to deploy, you will typically build an optimized production version. For Next.js projects that output static files (with output: 'export' set or by using the next export command), ServBay’s static website service is ideal.

1. Build the production version and export static files: In your project root (/Applications/ServBay/www/servbay-next-app), run:

   npm run build
   npm run export

   • The npm run build command compiles your Next.js project and generates an optimized production build, usually outputting to the .next directory.
   • The npm run export command (supported with proper Next.js config or older versions) or configuring output: 'export', exports your built application as static HTML, CSS, and JavaScript files. These will be placed in a directory called out.

2. Configure a ServBay Website (Static File Service): Open the ServBay app, go to Website management, and add a new website with the following:

   • Name: My first Next.js production site (or any name you like)
   • Domain: servbay-next-prod.servbay.demo (using the .servbay.demo suffix is recommended)
   • Website Type: Select Static
   • Website Root: Enter the full path to the out directory of your Next.js static files, e.g. /Applications/ServBay/www/servbay-next-app/out.

   After saving and applying the changes, ServBay will configure the web server to serve files directly from /Applications/ServBay/www/servbay-next-app/out.

3. Visit your production website: Open your browser and go to https://servbay-next-prod.servbay.demo. You should see your static website as exported from Next.js.

   Similarly, with ServBay’s support for custom domains and automatic SSL configuration, your local production environment website will also be served securely over HTTPS.

Summary

By following the steps above, you’ve successfully created a Next.js project in the ServBay local development environment and learned how to preview your project in development mode via ServBay’s reverse proxy as well as deploy it for production using ServBay’s static file service. ServBay’s integrated environment and handy Website management features greatly simplify local development and testing for Next.js projects.