Create and Run a Next.js Project

What is Next.js?

Next.js is a React framework developed by Vercel for building static and server-rendered React applications. It provides many out-of-the-box features such as Server-Side Rendering (SSR), Static Site Generation (SSG), API routing, built-in CSS and Sass support, among others, enabling developers to build modern web applications more efficiently.

Main Features and Advantages of Next.js

• Server-Side Rendering (SSR): Enhances page load speed and SEO performance.
• Static Site Generation (SSG): Pre-renders static pages, improving performance and user experience.
• Automatic Code Splitting: Loads only the JavaScript required for the current page, optimizing performance.
• Built-in Routing: File-system-based routing with no additional configuration needed.
• API Routing: Allows creating API endpoints within the same project.
• Built-in CSS and Sass Support: Conveniently manage styles.

Using Next.js helps developers efficiently build modern, responsive web applications.

Creating and Running a Next.js Project with ServBay

In this article, we will use ServBay's Node.js environment to create and run a Next.js project. We will utilize ServBay's "Hosting" feature to set up a web server and access the project via reverse proxy and static file service.

Creating a Next.js Project

1. Initialize the Project

   First, ensure you have installed the Node.js environment provided by ServBay. Then, initialize a new Next.js project with the following command:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Follow the prompts to enter the project name (recommended: servbay-next-app) and select other options as needed.

2. Install Dependencies

   Enter the project directory and install dependencies:

   cd servbay-next-app
   npm install

Modify the Output Content of the Next.js Project

1. Modify the pages/index.js File

   Open the pages/index.js file and modify the content to display "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Enter Development Mode

1. Run the Development Server

   Start the development server and specify the port (e.g., 8585):

   npm run dev -- -p 8585

   This will start a local development server and expose port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay's "Hosting" feature to access the development server via reverse proxy. In ServBay's "Hosting" settings, add a new reverse proxy:

   • Name: My first Next.js dev site
   • Domain: servbay-next-test.dev
   • Host Type: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   For detailed setup steps, refer to adding a Node.js development website.

3. Access Development Mode

   Open a browser and visit https://servbay-next-test.dev to see the project in real time. With ServBay supporting custom domains and free SSL certificates, you will enjoy higher security.

Build the Production Version

1. Build the Production Version

   When development is complete, build the production version using the following commands:

   npm run build
   npm run export

   After building, the generated static files will be located in the out directory.

2. Set Up Static File Service

   Use ServBay's "Hosting" feature to access the production version via static file service. In ServBay's "Hosting" settings, add a new static website:

   • Name: My first Next.js production site
   • Domain: servbay-next-test.prod
   • Host Type: Static
   • Website Root Directory: /Applications/ServBay/www/servbay-next-app/out

3. Access Production Mode

   Open a browser and visit https://servbay-next-test.prod to view the built production version. Using ServBay's custom domains and free SSL certificates, your website will have higher security and credibility.

Following these steps, you have successfully created and run a Next.js project and used ServBay's features to manage and access your project.