Next.js Applications

Deploy fullstack Next.js apps with frontend pages and backend API routes in one service, with automatic builds and zero-downtime deployments.

Overview

RunxBuild runs your Next.js application as a Node.js web service. Your app must listen on the port provided via the PORT environment variable.

Next.js can run as a server app (recommended for fullstack) or as a static export (recommended only for frontend-only deployments). In this guide, we’re focusing on the server (fullstack) setup.

Files RunxBuild Looks For

Ensure your repository contains a package.json in the configured root directory.

{
  "name": "runx-next-fullstack",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build --webpack",
    "start": "next start"
  },
  "dependencies": {
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"
  }
}

Your start script must run a server. For Next.js, that is usually next start.

Minimal Fullstack Structure

This example uses the Next.js App Router. It renders a frontend page and exposes a backend API route.

src/
  app/
    page.js
    api/
      hello/
        route.js
next.config.js
package.json

Backend API Route

Create an API endpoint using route.js. This runs on the server.

// src/app/api/hello/route.js
export async function GET() {
  return Response.json({
    success: true,
    message: "Hello from RunxBuild backend"
  });
}

Frontend Page

// src/app/page.js
"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/hello")
      .then((res) => res.json())
      .then(setData)
      .catch(() => setData({ message: "API error" }));
  }, []);

  return (
    <main>
      <h1>RunxBuild Next.js Fullstack App</h1>
      <p>Backend Response: {JSON.stringify(data)}</p>
    </main>
  );
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = nextConfig;

Deployment Settings

• Build Command: npm ci && npm run build
• Output Directory: (leave empty)
• Start Command: npm start

npm start runs your start script and keeps a server process running to serve both pages and API routes.