Next.js

Next.js 是 Web 版 React 框架。Next.js 已被一些全球最大的公司使用，它使你能够利用 React 组件的强大功能创建高质量的 Web 应用。

¥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

要在 Turborepo 中快速开始使用 Next.js，请按照 quickstart 的步骤创建一个包含两个 Next.js 应用的仓库：

¥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

将 Next.js 应用添加到现有仓库

¥Adding a Next.js application to an existing repository

使用 create-next-app 在包中设置新的 Next.js 应用。从你的代码库根目录运行：

¥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

与你的仓库集成

¥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:*"
  }
}

确保运行包管理器的安装命令。你可能还需要在 package.json 中更新 scripts，以适应你的代码库中的用例。

¥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

默认情况下，新应用将使用根 turbo.json 中定义的任务。如果你想为新应用配置不同的任务，请使用 软件包配置。

¥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

使用 Next.js 和 Turborepo 的微前端 时，请确保为子应用设置 basePath 属性。这确保图片和 CSS 等资源将被路由到正确的应用。

¥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;