Next js monorepo

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:

Adding a Next.js application to an existing repository

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

Integrating with your repository

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

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

Customizing tasks

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

Monorepo with Next.js and Expo

Fullstack monorepo template feat. Expo, Turbo, Next.js, Convex, Clerk

This is a latest TypeScript monorepo template with AI web and native apps featuring:

The example app is a mention taking app that can summarize notes using AI. Features include:

Monorepo with Nx

This is a monorepo example using Nx and a single Next.js site in ./apps/app.

Demo

https://solutions-nx-monorepo.vercel.sh

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Getting Started

Execute with npm, Yarn, or pnpm to bootstrap the example:

Development server

Run for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run to build the project. The build artifacts will be stored in the directory. Use the flag for a production build.

Running unit tests

Run to execute the unit tests via Jest.

Run to execute the unit tests affected by a change.

Code scaffolding

Run to generate a new component.

Generate an application

Run to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and app

Next.js Monorepos with Bit

Create a new Bit workspace

Install Bit:

npx @teambit/bvm install

Create a new Bit workspace:

bit init my-next-monorepo

Place the following reusable development environments in the file of your workspace. This will give you access to NextJS as well as generic React component templates:

{
"teambit.generator/generator": {
"envs": [
"frontend.nextjs/nextjs-env",
"bitdev.react/react-env"
]
},
}

Run the following to list the available templates:

bit templates

The output should list NextJS and (generic) React component templates:

Press enter or click to view image in full size

Create NextJS apps (app components)

Create as many NextJS apps as you like (in this example, we’ll create two apps):

bit create nextjs app1 app2

Let’s run both apps (on two different dev servers):

bit run app1
bit run app2

Your apps should be available in and .

Press enter or click to view image in full size

As mentioned, apps are also Bit components. When Bit components are maintained in a workspace, their source files will be located inside a single directory. Since these Bit components are also a NextJS apps, they will include

next js monorepo

Monorepo with Turborepo

This Turborepo starter is maintained by the Turborepo core team.

Using this example

Run the following command:

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

: a Next.js app
: another Next.js app
: a stub React component library shared by both and applications
: configurations (includes and )
: s used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

Build

To build all apps and packages, run the following command:

You can build a specific package by using a filter:

Develop

To develop all apps and packages, run the following command:

You can develop a specific package by using a filter:

Remote Caching

[!TIP] Vercel Remote Cache is free for all plans. Get started today at vercel.com.

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one,