Docs/Diferenças de estrutura

React

Nexy renderiza React 19 componentes no servidor e, em seguida, React os hidrata no navegador. Páginas, layouts, ilhas e ações são iguais em todos os frameworks: esta página cobre a configuração e depois as partes que diferem dos contratos compartilhados.

Iniciar um projeto

nx new my-app --template web-fbr-react

nx new my-app --template web-modular-react

O modelo é um projeto em modo servidor com React ilhas. Execute nx new my-app sem um modelo para responder aos prompts: o roteador, o tipo de projeto, se deve usar roteamento do lado do cliente e, em seguida, a estrutura.

Habilite React em um projeto existente

from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), react()],  customLogger: nexy.log(),});

nx new grava este arquivo; Nexy escreve __nexy__/vite.ts sozinho, então não o edite.

Regras

• Uma estrutura por projeto. useFF leva exatamente uma estrutura; useFF = [react(), vue()] interrompe o servidor na inicialização.

export default function Home() {  return <h1>Hello</h1>;}

import { useParams } from "@nexy/client"; export default function Post() {  const { slug } = useParams<{ slug: string }>();  return <h1>{slug}</h1>;}

import type { ReactNode } from "react"; export default function RootLayout({ children }: { children: ReactNode }) {  return (    <html>      <body>{children}</body>    </html>  );}

Ilhas

No modo servidor, um componente React importado para um arquivo .nexy é uma ilha.

Importando

Importe componentes no frontmatter do arquivo .nexy:

---from "@/components/Counter.tsx" import Counter---<Counter start=3 />

---from "@/components/Counter.tsx" import Counter---<Counter start=3 />

Diretrizes de hidratação

Use a propriedade directive para controlar quando a ilha hidrata:

• client:load (padrão): imediatamente
• client:idle: quando o navegador está ocioso
• client:visible: quando rola para visualização
• client:media: quando a consulta de mídia corresponde

Ações e navegação

Chamando ações

Use o gancho useAction para gerenciar o estado de uma chamada de ação:

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const { run, pending, error, data } = useAction(add_todo);// ...<button onClick={() => run({ title: "New Task" })}>Add</button>

Navegação

Use o componente Link para transições do lado do cliente:

import { Link } from "@nexy/client"; <Link href="/about">About</Link>

Para navegação programática, use o gancho useRouter:

import { useRouter } from "@nexy/client"; const router = useRouter();router.push("/dashboard");

Acesso URL

• usePathname(): caminho atual
• useParams(): segmentos dinâmicos
• useSearchParams(): string de consulta
• useLocation(): objeto de localização completo

Próximas etapas

• Visualizações: compare os formatos que uma página pode usar
• Frontend: Vite e a construção do cliente

Copiar a página como Markdown Editar no GitHub