Running Next.js

Next.js logo

In this article, you can find instructions on installing and using Next.js with the WebApps platform.

Prerequisites

To use Next.js, there are a few settings to check and configure on your hosting account.

  • There must be a WebApps section in your hosting Control Panel. If you do not see a WebApps section, then this tutorial is not suitable for your particular hosting environment. You can contact us via our ticketing system for further assistance.

  • SSH access must be enabled for your account via the hosting Control Panel > SSH Access section.

Installation

To run Next.js as a web application, you will have to connect to your account via SSH and follow the steps listed below.

  1. Create a directory for Next.js (e.g. ~/private/nextjs), and navigate to it with these commands::
    mkdir /home/$USER/private/nextjs
    cd /home/$USER/private/nextjs
  2. Create a WebApps project for Next.js (e.g. next) using the following sureapp CLI command:
    sureapp project create \
        --engine "node" \
        --engine-version "lts" \
        --release-dir "/home/$USER/private/nextjs/" \
        next
  3. Log into the Next.js application (e.g. next) using this command:
    sureapp project shell next
  4. Install the latest version of the Node.js Package Manager (npm):
    npm install -g npm@latest
  5. Create a Next.js start application using the default template by running the following command and going through the prompts that appear in the console:
    npx --yes create-next-app@latest .
  6. Create a static copy of the Next.js application using this command:
    npm run build
  7. Choose the URL where you would like to access the Next.js application via the WebApps section of the hosting Control Panel by clicking on the Edit button (pencil icon) next to the next web application. Select the domain and subdomain where Next.js will run on the screen that appears via the available drop-down menus. To apply the changes, click on the Update button.

    Edit Next.js app

  8. Enable the Next.js web application (e.g. next) by clicking on the button with a red circle (Enable app) icon next to it or by using the sureapp CLI tool:
    sureapp service manage --enable next
  9. Open the selected URL for the Next.js application (e.g. http://nextjs.example.com) in your browser.

    Welcome to Next.js