🌐 Nodejs.cn
新建

Next.js

PreviousNext

创建一个支持 RTL 的新的 Next.js 项目。

创建项目

🌐 Create Project

使用 --rtl 标志和 next 模板创建一个新项目。

🌐 Create a new project using the --rtl flag and the next template.

如果你已经使用 shadcn/create 创建了项目，可以跳过此步骤。

pnpm dlx shadcn@latest create --template next --rtl

这将创建一个带有 rtl: true 标志的 components.json 文件。

🌐 This will create a components.json file with the rtl: true flag.

components.json
{
  "$schema": "https://shadcn.nodejs.cn/schema.json",
  "style": "base-nova",
  "rtl": true
}

添加 DirectionProvider

🌐 Add DirectionProvider

用带有 direction="rtl" 属性的 DirectionProvider 组件封装你的应用。

🌐 Wrap your application with the DirectionProvider component with the direction="rtl" prop.

然后将 dir="rtl" 和 lang="ar" 属性添加到 html 标签。将 lang="ar" 更新为你的目标语言。

🌐 Then add the dir="rtl" and lang="ar" attributes to the html tag. Update lang="ar" to your target language.

app/layout.tsx
import { DirectionProvider } from "@/components/ui/direction"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

添加字体

🌐 Add Font

为了获得最佳的从右到左阅读体验，我们建议使用对目标语言有良好支持的字体。Noto 是一个很好的字体系列，它与 Inter 和 Geist 搭配得很好。

🌐 For the best RTL experience, we recommend using fonts that have proper support for your target language. Noto is a great font family for this and it pairs well with Inter and Geist.

app/layout.tsx
import { Noto_Sans_Arabic } from "next/font/google"
 
import { DirectionProvider } from "@/components/ui/direction"
 
const fontSans = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-sans",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ar" dir="rtl" className={fontSans.variable}>
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

对于其他语言，例如希伯来语，你可以使用 Noto_Sans_Hebrew 字体。

🌐 For other languages, eg. Hebrew, you can use the Noto_Sans_Hebrew font.

添加组件

🌐 Add Components

你现在可以向你的项目添加组件了。CLI 将为你处理 RTL 支持。

🌐 You are now ready to add components to your project. The CLI will take care of handling RTL support for you.

pnpm dlx shadcn@latest add item