Next.js app box for EasyPanel

 

Next.js box starter for EasyPanel. Supports all Next.js features. See also Next.js with Docker for EasyPanel guide

• Supports all Next.js features
• Auto git-deployments and CI/CD and more
• Automatic SSL and certificates management

Choose between node.js server or standalone build

Node.js Server

Next.js can be deployed to any hosting provider that supports Node.js. Ensure your package.json file has the following scripts:

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

Standalone setup (Recommended)

To use this box as a standalone app, you need to add a next.config.js file to the root of your project with the following content:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone"
};

export default nextConfig;

Modify the npm scripts in package.json to use for standalone build:

{
  "dev": "next dev",
  "build": "next build",
  "lint": "next lint",
  "start": "node ./.next/standalone/server.js"
}

Add the following scripts to package.json to copy the public and static directories to the standalone build:

{
  "postbuild": "npm-run-all -s export:*",
  "export:public": "cp -r ./public ./.next/standalone",
  "export:static": "cp -r ./.next/static ./.next/standalone/.next"
}

Local docker development

docker build -t nextjs-easypanel -f ./Dockerfile .
docker run -p 3000:3000 nextjs-easypanel

EasyPanel configuration

Create a new box from GitHub repository.

Deployment Script

Note, the npm ci command is used to install dependencies. This command is faster and more reliable than npm install.

cd /code
npm ci
npm run build
supervisorctl restart nodejs-server

Processes script

Create a new process to run npm start.

Name: nodejs-server process
Directory: /code (or /code/.next/standalone)
Command: npm run start

Node.js

• Node.js version: 18
• Yarn / pnpm: Disabled

---

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.