Next.js

In this guide we’ll show you how you can host your Next.js project on Orbiter.

Note

Orbiter only supports static sites, which means features like API routes or server side functions in Next.js will not work.

Setup

Start up a new Next.js project with the following command:

npx create-next-app@latest orbiter-site

Select your preferences for your app, then once complete run the following command to move into the project and spin up the dev server

cd orbiter-site
npm run dev

Go ahead and run each of those one at a time, then you should have a local dev server at http://localhost:3000 which you can visit and see the starter template.

Build

Once you have your site edited and ready to go, close the dev server and add the following line to the next.config.ts file.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'export'
};

export default nextConfig;

Then run the build command

npm run build

This should create a out folder in your project directory.

Deploy

Login to app.orbiter.host, then click new site in the top right. From there you can either drag the out folder into the drop zone or use the “select folder” button snd locate the out folder. Choose a subdomain for your free orbiter.website handle, then click submit.

In just a moment your site should be ready to visit, which you can do by clicking on the domain on the site card!

If you prefer a CLI experience check out the docs here. It’s as simple as these three commands:

npm i -g orbiter-cli

orbiter login -p google # or github

orbiter create -d my-site ./out

Additional Resources

More Features Check out what you can unlock with our affordable pricing plans

What is Orbiter? See what powers Orbiter behind the scenes

Orbiter Blog Check out some of our tutorials and musing about bringing fun back to the web

Orbiter CLI Supercharge your site management speeds with our CLI