strapi starter next corporate

⛔ depreciado

Este repositório não é mais mantido e funciona apenas para o Strapi V3. Você pode encontrar a versão mais recente do Strapi V4 deste motor de partida nos iniciantes e templacos Monorepo.

---

Strapi Starter Próximo site corporativo

Próximo titular para criar um site corporativo com Strapi.

Veja a demonstração ao vivo • Leia a postagem do blog

Este motor de partida foi projetado para flexibilidade. Usando -o, você poderá gerenciar inteiramente o conteúdo do seu site no Strapi e obter um próximo aplicativo gerado automaticamente. As equipes de marketing poderão criar páginas e projetar seu layout sem a ajuda dos desenvolvedores.

Este iniciante apresenta:

• Criação de páginas dentro de strapi, nenhum código necessário
• Estrutura de página totalmente flexível: projete as páginas que você deseja usar seções de interface do usuário
• 8 Seções de interface do usuário fora da caixa: Hero, RichText, LargeVideo, depoimentos, preços, BottomActions, Featurerows, FeatureColumns
• Fácil de tema com Tailwind
• Geração de local estático com o próximo
• Um modo de visualização integrado, para ver suas páginas em um URL privado antes de publicá -las
• Conteúdo em vários idiomas usando i18n

Este iniciante usa o modelo corporativo de Strapi

Confira todas as nossas entradas aqui

Começando

Use a nossa CLI create-strapi-starter para criar seu projeto.

npx create-strapi-starter@3 my-site next-corporate

A CLI criará um monorepo, instalará dependências e executará seu projeto automaticamente.

O próximo servidor de front -end será executado aqui => http: // localhost: 3000

O servidor de backend strapi será executado aqui => http: // localhost: 1337

Modo de visualização

Você pode ativar o modo de visualização com um URL como este:

http://localhost:3000/api/preview?secret=<preview-secret>&slug=<slug>

<preview-secret> é o token secreto definido na sua configuração .env, <slug> é a lesma que você entrou no Strapi para a sua página.

Enquanto o modo de visualização estiver no acesso, você pode acessar páginas draft , assim como as páginas published .

Por exemplo, http: // localhost: 3000/segredo estaria disponível no modo de visualização.

Um banner permanecerá sob a navegação para que você saiba que o modo de visualização está ativado e também permitirá que você o desative.

Personalize seu site corporativo

Para editar este site, você precisará executar o front -end e o back -end em seu ambiente de desenvolvimento.

Adicionando seções

Construímos seções para você, mas você provavelmente desejará adicionar mais para atender às suas necessidades. Siga estas etapas:

• Crie um novo componente em Strapi na categoria "Seções"
• No construtor de conteúdo, abra a coleção de páginas e verifique sua nova seção no campo contentSections .
• Crie um componente de reação que pegue um suporte data em /frontend/components/sections
• Para vincular sua seção Strapi a este componente React, Open /frontend/components/sections.js e adicione uma entrada ao objeto sectionComponents .

Tema personalizado

Usamos o CSS do Tailwind para estilo. Para modificar a aparência da sua página, você pode editar o tema em /front/tailwind.config.js . Leia os documentos do Tailwind para visualizar todas as alterações que você pode fazer. Por exemplo, você pode alterar a cor principal como esta:

 const { colors } = require ( `tailwindcss/defaultTheme` )

module . exports = {
  theme : {
    extend : {
      colors : {
        primary : colors . green ,
      } ,
    } ,
  } ,
} 

Implantando para a produção

Você precisará implantar os projetos frontend e backend separadamente. Aqui estão os documentos para implantar cada um:

• Implantar Strapi
• Implantar o próximo.js

Não se esqueça de configurar suas variáveis de ambiente em seus aplicativos de produção.

Aqui estão os necessários para o front -end:

• NEXT_PUBLIC_STRAPI_API_URL : URL do seu back -end de Strapi, sem arrastar Slash
• PREVIEW_SECRET : Uma string aleatória usada para proteger suas páginas de visualização

E para o back -end:

• FRONTEND_URL : URL do seu front -end, sem barra
• FRONTEND_PREVIEW_SECRET : Token of Next.js Modo de visualização definido no front -end

Divirta -se usando este iniciante!