How to Host Next.js Applications

Introduction

This guide covers deploying Next.js applications on Shard Cloud. Next.js is a React framework for production-grade applications with server-side rendering and static site generation.

Creating Your Project

Ensure you have Node.js and npm installed.

Creating a New Next.js Project

npx create-next-app@latest my-next-app
cd my-next-app

Configuring Port 80

Update package.json to use port 80:

package.json

{
  "name": "my-next-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "^18",
    "react-dom": "^18"
  }
}

Building Your Project

Build the production output:

npm run build

This creates the .next folder with optimized production files.

Shard Cloud Configuration

Create a .shardcloud file:

.shardcloud

DISPLAY_NAME=Next.js Website
DESCRIPTION=React-based Next.js Application
MAIN=package.json
MEMORY=1024
VERSION=recommended
SUBDOMAIN=my-nextjs-site
CUSTOM_COMMAND=npm run build && npm run start

Next.js applications typically require at least 512MB-1024MB of memory for the build process.

Deploying

Build Locally (Optional)

Run npm run build to verify your build works.

Prepare Your Files

Ensure you have:

All source files (pages/, app/, components/, etc.)
package.json
.shardcloud
next.config.js (if applicable)

Exclude Unnecessary Files

Remove:

node_modules/
.next/cache/
package-lock.json

Create ZIP Archive

Compress your project folder.

Upload to Shard Cloud

Go to Shard Cloud Dashboard and upload.

Additional Resources

Visit the official Next.js documentation for more information.

Troubleshooting

Build fails with memory errors

Increase MEMORY in your .shardcloud configuration to at least 1024MB.

Page not found (404) errors

Verify your pages are in the correct directory (pages/ or app/)
Check that dynamic routes are properly configured

API routes not working

Ensure API routes are in pages/api/ or app/api/ directory.

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host Next.js Applications

Introduction

Creating Your Project

Creating a New Next.js Project

Configuring Port 80

Building Your Project

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Creating a New Next.js Project

​Configuring Port 80

​Building Your Project

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Creating a New Next.js Project

Configuring Port 80

Building Your Project

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting