Next.js

Next.js is the React framework for the web. Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.

Quickstart

To get started with Next.js in a Turborepo quickly, follow the quickstart to create a repository with two Next.js applications:

pnpm dlx create-turbo@latest

yarn dlx create-turbo@latest

npx create-turbo@latest

bunx create-turbo@latest

Adding a Next.js application to an existing repository

Use create-next-app to set up a new Next.js application in a package. From the root of your repository, run:

pnpm dlx create-next-app@latest apps/my-app

yarn dlx create-next-app@latest apps/my-app

npx create-next-app@latest apps/my-app

bunx create-next-app@latest apps/my-app

Integrating with your repository

To add Internal Packages to your new application, install them into the app with your package manager:

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

Make sure to run your package manager's install command. You also may need to update scripts in package.json to fit your use case in your repository.

Customizing tasks

By default, the new application will use the tasks defined in the root turbo.json. If you'd like to configure tasks differently for the new application, use Package Configurations.

Microfrontends

When using Next.js with Turborepo's microfrontends, make sure to set the basePath property for child applications. This ensures the assets like images and CSS will be routed to the correct application.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  basePath: "/docs",
};

export default nextConfig;