125k

Next.js

PreviousNext

RTL サポートを備えた新しい Next.js プロジェクトを作成します。

プロジェクトの作成

--rtl フラグと next テンプレートを使用して新しいプロジェクトを作成します。

shadcn/create を使ってプロジェクトを作成済みの場合、この手順は省略できます。

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

これにより、rtl: true フラグを持つ components.json ファイルが作成されます。

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

DirectionProvider の追加

direction="rtl" prop を持つ DirectionProvider コンポーネントでアプリケーションをラップします。

次に、html タグへ dir="rtl" と lang="ar" 属性を追加します。lang="ar" は対象言語に更新してください。

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>
  )
}

フォントを追加する

最適な RTL 体験のため、対象言語を適切にサポートするフォントの使用を推奨します。Noto はこの用途に適したフォント ファミリーで、Inter や 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 フォントを使えます。

コンポーネントの追加

これで、プロジェクトにコンポーネントを追加する準備ができました。CLI が RTL サポートを処理します。

pnpm dlx shadcn@latest add item