Introducing Support for Next.js 13.5

We are thrilled to announce support for Next.js 13.5 with Ampt! This update brings several exciting new features and improvements to enhance your web development experience. With the addition of App Router, React Server Components, Streaming, and Suspense support, this release offers a range of powerful tools to help you build faster, more efficient web applications. In this blog post, we'll provide an overview of these new features, and we'll also guide you on how to get started using Next.js 13.5 with Ampt.

What's New in Next.js 13.5

The Next.js App Router was introduced in Next.js 13.4 and is a new file-system based router built on React Server Components and Suspense. It simplifies the process of defining routes and page layouts, making it easier to create clean and organized navigation. Layouts, pages, and components are all server components by default, and you fetch data using the familiar fetch API:

javascript
export default async function Page() {
  const res = await fetch('https://api.example.com/...');
  const data = res.json();

  return '...';
}

With Suspense you can easily display fallback content while components are loading:

javascript
import { Suspense } from 'react';
import { Feed } from './components';

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <Feed />
      </Suspense>
    </section>
  );
}

When loading the page, the response will be streamed so that initially the fallback content is displayed then updated when the component receives the data and renders it, all on the server.

For more details on the latest Next.js features be sure to check out the Next.js docs.

How to Get Started

Getting started using Next.js 13.5 with Ampt is easy. Whether you're a seasoned Next.js developer or just getting started, we've got you covered.

Start with Our Starter Template

If you're new to Next.js, or want to quickly jump into your project, we recommend using our official Next.js starter template. It comes preconfigured with Next.js 13.5 and is ready for you to start hacking on it right away.

You can deploy it through the Ampt dashboard by clicking on the “Deploy to Ampt” button, or you can initialize a new project using the Ampt CLI:

Terminal
›︎ ampt --template nextjs

That will log you in and walk you through downloading the template code and spinning up your sandbox. You can then run the dev server from the ampt prompt:

Terminal
ampt  ›︎ dev  ▲ Next.js 13.5.4
  - Local: http://localhost:3000

You can use http://localhost:3000 to access the Next.js development server, which auto-reloads changes as you make them.

Run the deploy command when you’re ready to deploy a “prod” stage:

Terminal
ampt  ›︎ deploy prod

That will run the build and create a new prod environment. The URL will be displayed when the deployment is successful.

Update an Existing Application

If you already have a Next.js 13.5 application you want to deploy with Ampt, our documentation provides detailed steps on how to update your project. The gist of it is:

Install the @ampt/nextjs package
Add npm scripts for Ampt to start the dev server and build your application
Add an index.js file that loads the Next.js entrypoint
Specify the “nodejs18” Ampt runtime in your package.json

With those changes, you’ll be ready to run the Ampt CLI:

Terminal
›︎ ampt

and start the dev server:

Terminal
ampt  ›︎ dev  ▲ Next.js 13.5.4
  - Local: http://localhost:3000

Run the deploy command when you’re ready to deploy a “prod” stage:

Terminal
ampt  ›︎ deploy prod

What's next?

Now that you’re up and running, you’ll want to push your code to a GitHub repository and set up your GitHub integration to automatically deploy merged changes. For more information and in-depth documentation, please visit the Next.js framework page in the Ampt docs.

You can also check out our documentation to learn more about Ampt’s built-in features like Data, Storage, Websockets, Tasks, and Events.

Next.js 13.5 with Ampt opens up exciting possibilities for web developers and we can't wait to see the incredible applications you'll build with it. We look forward to your feedback as we continue to improve and evolve the platform. Be sure to join the community on Discord and Start Building Now!