# Next.js · JGuang UI

> 本页提供 JGuang UI 技术内容、中文导航与术语适配。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/rtl/next
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

**Starting a new project?** Use [JGuang UI installation](/systems/jguang-ui#install) for a fully configured Next.js app with custom themes, Base UI or Radix, and icon libraries.


### Create Project

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

**You can skip this step if you have already created a project using [JGuang UI installation](/systems/jguang-ui#install).**

```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```

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

```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```

### Add DirectionProvider

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

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

```tsx title="app/layout.tsx" showLineNumbers {1,9-13}
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

For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.

```tsx title="app/layout.tsx" showLineNumbers {1,5-8,16}
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>
  )
}
```

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

### Add Components

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

```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt