Next.js

Next.js is a React framework for building server-rendered and statically generated applications. Choose this component when you want Diploi to handle optimized builds, routing, and image processing without extra configuration. It works well for SaaS dashboards, marketing pages, and any React project that needs reliable hosting.

Add to your project

Paste this entry into the components list in diploi.yaml to add Next.js to your project.

components:
  - name: Next.js
    identifier: next
    package: https://github.com/diploi/component-nextjs#v16.3.3

If the folder of the component in your repository is not named next, add a folder parameter with the name of the folder.
Import the environment variables of add-ons, such as a database, into the component with env.include in diploi.yaml:

components:
  - name: Next.js
    identifier: next
    package: https://github.com/diploi/component-nextjs#v16.3.3
    env:
      include:
        - postgres.*

Next.js reference

Readme

Launch a trial, no account needed https://diploi.com/component/next

Uses the official node Docker image.

Operation

Getting started

In the Dashboard, click Create Project +
Under Pick Components, choose Next.js

You can add other frameworks from this page if you want to create a monorepo application, eg, Next.js + Bun for backend.
In Pick Add-ons, select any databases or extra tools you need.
Choose Create Repository so Diploi generates a new GitHub repo for your project.
Click Launch Stack

Check the guide https://diploi.com/blog/hosting_nextjs_apps

Development

Will run npm install when component is first initialized, and npm run dev when deployment is started.

Production

Will build a production ready image. Image runs npm install & npm build when being created. Once the image runs, npm start is called.