Next.js

Ampt allows developers to build applications using the Next.js framework.

We strive to support all the latest Next.js features, but if you find something missing, please let us know.

If you don't already have a Next.js project, see the Next.js docs to get started.

Once you have your project set up, install @ampt/nextjs in your project:

TerminalCopy code
npm install @ampt/nextjs --save

or run this when you’re in the interactive shell:

TerminalCopy code
install @ampt/nextjs

Add the ampt:dev and ampt:build scripts to configure how you start the development server inside interactive shell and how you build your application. You will need to update package.json file as follows:

• set main to index.js which will be the entrypoint for the server
• add ampt:dev script for running the Next.js dev server
• add ampt:build script for running ampt-next build

This is an example of what your package.json should look like::

package.json
{
  "name": "my-nextjs-app",
  "main": "index.js",
  "scripts": {
    "build": "next build",
    "ampt:build": "ampt-next build",
    "ampt:dev": "next dev",
  },
  ...
}

Add the ampt integration to your next.config.js file:

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

module.exports = nextConfig;

Add the file index.js to the root of your project, and add the following code:

// index.js

import "@ampt/nextjs/entrypoint";

This adds the Next.js server and image optimization to your application's entrypoint.

Start the interactive shell and run dev to start your development server

Terminal
ampt
dev

This will output a localhost URL you can visit to see your application running.

Run build in the interactive shell to create your build artifacts:

Terminal
build

This will run the ampt:build script so your application will be available from the sandbox URL.

Use the ampt deploy command when you are ready to deploy a stage environment.