Docs/Diferenças de estrutura

Preact

Nexy renderiza Preact 10 componentes no servidor e então Preact os assume 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-preact

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

O modelo é um projeto em modo servidor com Preact 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 Preact em um projeto existente

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

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

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

Escreva Preact

Um componente Preact é uma função no estilo React. As diferenças que importam aqui:

import { useState } from "preact/hooks"; export default function Counter({ start = 0 }: { start?: number }) {  const [count, setCount] = useState(start);  return <button class="counter" onClick={() => setCount(count + 1)}>{count}</button>;}

• Ganchos vêm de preact/hooks, tipos como ComponentChildren de preact.
• Escreva atributos HTML: class, for, charset. Link lê suas classes de class.

Regras

• Uma estrutura por projeto. useFF usa exatamente uma estrutura; useFF = [preact(), react()] interrompe o servidor na inicialização. Com useFF = preact(), todo arquivo .tsx é Preact.

• Uma página .mdx importa de "preact". Nexy compila um arquivo .mdx com Preact somente quando vê essa importação, por exemplo import { h } from "preact", e com React caso contrário. Consulte Markdown e MDX.

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 { ComponentChildren } from "preact"; export default function RootLayout({ children }: { children: ComponentChildren }) {  return (    <html>      <body>        <header>My app</header>        <main>{children}</main>      </body>    </html>  );}

Ilhas

No modo servidor, um componente Preact 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. Observe que Preact usa class em vez de className:

import { Link } from "@nexy/client"; <Link href="/about" class="nav" activeClassName="active">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