next wp

Next.JS Starter para o WordPress sem cabeça CMS

Assista ao vídeo de demonstração

Este é um modelo de partida para criar um aplicativo Next.js que busca dados de um site WordPress usando a API REST WordPress. O modelo inclui funções para buscar postagens, categorias, tags, autores e mídia em destaque de um site do WordPress e renderizá -las em um aplicativo Next.js.

next-wp é construído com o próximo.js 14, React, TypeScript, Tailwind, Shadcn/UI e Brijr/Craft. Ele combina muito bem com o BRIJR/componentes para uma experiência rápida de desenvolvimento. Construído por Cameron e Bridger em 9d8.

Índice

• Next.JS Starter para o WordPress sem cabeça CMS
  • Índice
  • Visão geral
  • Funções do WordPress
  • Tipos do WordPress
  • Componente do cartão postal
    • Adereços
    • Funcionalidade
    • Uso
  • Componente de filtro
    • Adereços
    • Funcionalidade
  • Mapa dinâmica do site

Visão geral

• lib/wordpress.ts -> funções para buscar o WordPress CMS via API REST
• lib/wordpress.d.ts -> Declarações de tipo para API REST WP
• components/posts/post-card.tsx -> componente e estilo para postagens
• app/posts/filter.tsx -> Componente para manusear a filtragem de postagens
• /menu.config.ts -> Site NAV Menu Configuração para desktop e celular
• /site.config.ts -> Configuração para sitemap.ts
• app/sitemap.ts -> Sitemap gerado dinamicamente

Existem duas variáveis env que devem ser definidas no arquivo .env.local :

WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com "

Você pode encontrar o exemplo do arquivo .env.local no arquivo .env.example (e em vercel):

Funções do WordPress

O arquivo lib/wordpress.ts contém várias funções para buscar dados de um site WordPress usando a API REST WordPress. Aqui está uma breve visão geral de cada função:

• getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : busca todas as postagens no site WordPress. Opcionalmente, você pode passar parâmetros de filtro para filtrar postagens por autor, tag ou categoria.

• getPostById(id: number) : busca uma única postagem por seu ID.

• getPostBySlug(slug: string) : busca uma única postagem pela sua lesma.

• getAllCategories() : busca todas as categorias no site WordPress.

• getCategoryById(id: number) : busca uma única categoria por seu ID.

• getCategoryBySlug(slug: string) : busca uma única categoria por sua lesma.

• getPostsByCategory(categoryId: number) : busca todas as postagens pertencentes a uma categoria específica por seu ID.

• getPostsByTag(tagId: number) : busca todas as postagens marcadas com uma tag específica por seu ID.

• getTagsByPost(postId: number) : busca todas as tags associadas a uma postagem específica por seu ID.

• getAllTags() : busca todas as tags no site WordPress.

• getTagById(id: number) : busca uma única tag pelo seu ID.

• getTagBySlug(slug: string) : pega uma única tag pela sua lesma.

• getAllPages() : busca todas as páginas do site WordPress.

• getPageById(id: number) : busca uma única página pelo seu ID.

• getPageBySlug(slug: string) : busca uma única página pela sua lesma.

• getAllAuthors() : busca todos os autores do site WordPress.

• getAuthorById(id: number) : busca um único autor pelo seu id.

• getAuthorBySlug(slug: string) : busca um único autor pela sua lesma.

• getPostsByAuthor(authorId: number) : busca todas as postagens escritas por um autor específico por seu ID.

• getPostsByAuthorSlug(authorSlug: string) : busca todas as postagens escritas por um autor específico por sua lesma.

• getPostsByCategorySlug(categorySlug: string) : busca todas as postagens pertencentes a uma categoria específica por sua lesma.

• getPostsByTagSlug(tagSlug: string) : busca todas as postagens marcadas com uma tag específica por sua lesma.

• getFeaturedMediaById(id: number) : busca a mídia em destaque (por exemplo, imagem em destaque) por seu ID.

Essas funções fornecem uma maneira conveniente de interagir com a API REST WordPress e recuperar vários tipos de dados do seu site WordPress. Eles podem ser usados no seu aplicativo Next.js para buscar e exibir o conteúdo do WordPress.

Tipos do WordPress

O arquivo lib/wordpress.d.ts contém definições de tipo de descrição do TypeScript para várias entidades do WordPress e estruturas de dados relacionadas. Aqui está uma visão geral dos principais tipos:

• Post : representa uma postagem do WordPress com propriedades como id , title , content , excerpt , author , categories , tags e muito mais.

• Category : representa uma categoria WordPress com propriedades como id , name , slug , description , parent e count .

• Tag : representa uma tag wordpress com propriedades semelhantes à Category , incluindo id , name , slug , description e count .

• Page : representa uma página do WordPress com propriedades como id , title , content , excerpt , author , parent e template .

• Author : representa um autor WordPress com propriedades como id , name , slug , description , avatar_urls e meta .

• BlockType : representa um tipo de bloco WordPress com propriedades como name , title , description , icon , category , attributes e muito mais.

• EditorBlock : representa um bloco no editor do WordPress com propriedades como id , name , attributes , innerBlocks e innerHTML .

• TemplatePart : representa uma peça de modelo no WordPress com propriedades como id , slug , theme , type , content , title e status .

• SearchResult : representa um resultado de pesquisa do WordPress com propriedades como id , title , url , type e subtype .

• FeaturedMedia : representa a mídia em destaque (por exemplo, imagem em destaque) no WordPress com propriedades como id , title , caption , alt_text , media_details e source_url .

• FilterBarProps : representa os adereços para um componente de barra de filtro com authors , tags , categories e valores selecionados para cada.

Essas definições de tipo fornecem segurança de tipo e conclusão automática ao trabalhar com dados do WordPress no seu aplicativo Next.js. Eles garantem que você esteja acessando as propriedades corretas e passando os tipos de dados esperados ao interagir com a API REST WordPress.

Componente do cartão postal

O arquivo components/posts/post-card.tsx contém o componente de PostCard , responsável por renderizar um único cartão postal no aplicativo. Aqui está uma visão geral do componente:

Adereços

• post : Um objeto Post que representa a postagem do WordPress a ser renderizada.

Funcionalidade

1. O componente busca a mídia, autor e categoria em destaque associados ao post usando as funções getFeaturedMediaById , getAuthorById e getCategoryById de lib/wordpress.ts .

2. Ele formata a data de postagem usando o método toLocaleDateString com as opções especificadas.

3. O componente torna um link para a página de postagem individual usando a lesma da postagem.

4. Dentro do link, ele exibe a imagem, título, trecho, categoria e data da postagem.

5. O título e o trecho do post são renderizados usando o atributo dangerouslySetInnerHTML para lidar com o conteúdo HTML.

6. O componente aplica várias classes CSS para estilizar o cartão postal, incluindo efeitos e transições de pairar.

Uso

Para usar o componente PostCard , importe -o para a página ou componente desejado e passe um objeto Post como o suporte post .

Componente de filtro

O arquivo components/posts/filter.tsx contém o componente FilterPosts , que fornece uma interface de filtragem para postagens com base em tags, categorias e autores. Aqui está uma visão geral do componente:

Adereços

• authors : uma variedade de objetos Author representando os autores disponíveis para filtrar.
• tags : uma matriz de objetos Tag representando as tags disponíveis para filtrar.
• categories : Uma matriz de objetos Category representando as categorias disponíveis para filtrar.
• selectedAuthor : uma sequência opcional que representa o ID do autor atualmente selecionado.
• selectedTag : uma sequência opcional representando o ID de tag atualmente selecionado.
• selectedCategory : uma sequência opcional que representa o ID da categoria atualmente selecionado.

Funcionalidade

1. O componente usa o gancho useRouter do Next.js para lidar com atualizações de navegação e URL com base nos filtros selecionados.

2. Ele renderiza três componentes Select para filtrar postagens por tag, categoria e autor. Cada componente Select exibe as opções disponíveis e permite que o usuário selecione um valor específico ou escolha "tudo" para redefinir o filtro.

3. Quando um valor de filtro é alterado, a função handleFilterChange é chamada com o tipo de filtro e o valor selecionado. Ele atualiza os parâmetros de consulta URL de acordo e navega para o URL atualizado.

4. O componente também inclui um botão "Redefinir filtros" que, quando clicado, chama a função handleResetFilters para navegar de volta para a página /posts sem nenhum filtro aplicado.

5. Os valores de filtro selecionados são passados como adereços para o componente e usados para definir os valores iniciais dos componentes Select .

6. Os valores de filtro selecionados são passados como adereços para o componente e usados para definir os valores iniciais dos componentes Select .

7. Os valores de filtro selecionados são passados como adereços para o componente e usados para definir os valores iniciais dos componentes Select .

Mapa dinâmico do site

O sitemap para next-wp é gerado em @/app/sitemap.ts e aparecerá ao vivo no seu site em yourdomain.com/sitemap.xml . Para configurar seu sitemap corretamente, certifique -se de atualizar o site_domain no site.config.ts para ser o domínio do seu front -end (não a sua instância do WordPress).

Construído por Bridger Tower e Cameron Youngblood em 9d8