RTL (Next.js)

Core Idea

Passo a passo para criar (ou configurar) um projeto Next.js com suporte RTL completo: flag do CLI, DirectionProvider, atributos HTML e fonte apropriada.

Key Concepts

npx shadcn@latest create --template next --rtl: cria o projeto já com rtl: true em components.json.
dir="rtl" e lang="ar" na tag <html>: obrigatórios além do DirectionProvider React, para o navegador aplicar corretamente comportamento nativo RTL (scrollbar, seleção de texto, etc).
Noto_Sans_Arabic (next/font/google): fonte recomendada para o idioma alvo, injetada via CSS variable --font-sans.

Code Examples

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

O que demonstra: Wiring mínimo de RTL no root layout do App Router.

import { Noto_Sans_Arabic } from "next/font/google"

const fontSans = Noto_Sans_Arabic({ subsets: ["arabic"], variable: "--font-sans" })

<html lang="ar" dir="rtl" className={fontSans.variable}>

O que demonstra: Carregamento de fonte otimizada para árabe via next/font/google, aplicada como CSS variable.

Reference Tables

Passo	Ação
1	`npx shadcn@latest create --template next --rtl`
2	Adicionar `dir="rtl"`/`lang="ar"` no `<html>` + `DirectionProvider`
3	Configurar fonte Noto (ex: `Noto_Sans_Arabic`)
4	`npx shadcn@latest add <component>` — CLI já aplica RTL

Key Takeaways

components.json resultante contém "rtl": true, o que ativa a transformação automática de classes em todo add subsequente.
Trocar lang="ar" pelo idioma alvo real (ex: he para hebraico) e a fonte correspondente (Noto_Sans_Hebrew).
Depois do setup, adicionar componentes normalmente com npx shadcn@latest add <nome> já vem com suporte RTL.

Connects To

rtl: guia geral e conceitos de transformação do CLI.
Direction (ch077): DirectionProvider é o componente central usado aqui.