O que é Next.js?
Next.js é uma estrutura de aplicativo de Vercel que permite que você inicialize rapidamente um novo Reagir inscrição.
Alguns recursos básicos incluem a criação Páginas e busca de dados, e permitem que você gere um site estático ou use a renderização do lado do servidor para carregar dinamicamente seu aplicativo.
Além disso, você pode tirar proveito de seus recursos avançados, como Encaminhamento ou criando um API ao lado de sua IU.
O que é um Starter?
Os starters são basicamente um repositório git na forma de um modelo que permite criar facilmente um aplicativo pré-configurado.
Não há nada necessariamente especial sobre um Starter. Em seu núcleo, é um aplicativo Next.js que já foi configurado de uma maneira específica e geralmente generalizado para que qualquer pessoa possa usá-lo.
Por exemplo, se você tende a construir muitos aplicativos da mesma maneira todas as vezes, pode ter que repetir essas mesmas etapas de configuração sempre que criar um novo aplicativo.
Em vez disso, você pode criar um Starter de onde iniciará seus projetos – e isso eliminará a necessidade de repetir as primeiras etapas a cada vez.
O que vamos construir?
Vamos construir um Starter Next.js básico que permitirá que você ou qualquer outra pessoa crie um novo projeto de maneira rápida e fácil com esse Starter como ponto de partida.
Embora não vamos nos aprofundar nos recursos, como o objetivo aqui é aprender sobre os Starters, vamos testar isso adicionando Sass para Next.js para que alguém possa facilmente começar a usar os superpoderes CSS.
Você pode verificar o Iniciante no GitHub: github.com/colbyfayock/next-sass-starter.
Criar um novo Next.js Starter
Para começar a criar um Starter, precisamos começar com um aplicativo Next.js.
Podemos fazer isso executando o seguinte comando em qualquer diretório em que você deseja criar:
yarn create next-app# ornpx create-next-appDepois de executá-lo, Next.js pedirá um nome de projeto. Embora você possa usar o que quiser, Next.js Starters normalmente têm um padrão de nome de next-[name]-starter.
Então, como estamos criando um Sass Starter, posso chamá-lo next-sass-starter.
Depois que o Next.js tiver instalado todas as nossas dependências, você estará pronto para navegar até essa pasta e executar o comando para iniciar o servidor de desenvolvimento.
yarn dev# ornpm run devE assim que o servidor de desenvolvimento inicializar, devemos estar prontos para começar!
Neste ponto, temos praticamente um Starter básico. Como mencionado antes, não há realmente muito que seja realmente especial com um Next.js Starter. Então, se empurrássemos isso para o Github, poderíamos começar a usá-lo imediatamente “como está”.
Você pode testar isso executando o seguinte:
yarn create next-app [project-name] -e [GitHub URL]# ornpx create-next-app [project-name] -e [GitHub URL]Depois de executá-lo, você deve configurar um novo diretório com um projeto criado a partir do Starter com todas as dependências instaladas.
Mas queremos fazer mais do que isso. Nosso objetivo é adicionar recursos que ajudem a iniciar um aplicativo com mais do que o padrão, então vamos adicionar Sass.
Adicionando Sass a um Starter Next.js
Nota: Para nosso exemplo, vamos criar um starter Sass como o nome acima pode ter sugerido. Sinta-se à vontade para adicionar quaisquer recursos que desejar neste momento, incluindo Sass ou não.
Lembre-se – o objetivo aqui será fornecer algo que possamos usar ao criar um novo projeto com este Starter.
Em seguida, queremos realmente adicionar Sass ao nosso projeto. Para começar, queremos instalar o sass como uma dependência:
yarn add sass# ornpm install sassEm seguida, porque Next.js já procura .scss como uma extensão de arquivo, podemos simplesmente atualizar dois arquivos CSS no styles diretório para .scss.
Portanto, altere os seguintes arquivos:
styles/globals.css => styles/globals.scssstyles/Home.module.css => styles/Home.module.scssEm seguida, precisamos configurar nossas instruções de importação para reconhecer nossas novas extensões de arquivo.
No pages/_app.js, atualize a importação de estilos na parte superior para:
import '../styles/globals.scss'E em pages/index.js, atualize a importação de estilos para:
import styles from '../styles/Home.module.scss'Neste ponto, você pode iniciar seu servidor de desenvolvimento e ainda devemos ver a página Next.js padrão.
Para ver nosso Sass em ação, podemos atualizar algumas de nossas classes para usar estilos aninhados em vez de seletores individuais.
Atualize todos os .footer seletores dentro de styles/Home.module.scss para o seguinte:
.footer { width: 100%; height: 100px; border-top: 1px solid #eaeaea; display: flex; justify-content: center; align-items: center; img { margin-left: 0.5rem; } a { display: flex; justify-content: center; align-items: center; }}Você pode usar a mesma estrutura de aninhamento para atualizar .title e .card.
Também podemos adicionar o seguinte ao topo de nossa styles/Home.module.css Arquivo:
$color-primary: #0070f3;E atualize todas as instâncias da cor nesse arquivo de #0070f3 para $color-primary:
.title { ... a { color: $color-primary;Se você recarregar a página, nada mudará. Mas atualize essa variável para sua cor favorita, como:
$color-primary: blueviolet;E agora todas as cores mudam.
Finalmente, como agora temos um iniciador Sass, vamos atualizar o título da página. Substitua “Bem-vindo ao Next.js!” No pages/index.js para:
<h1 className={styles.title}> <a href="https://nextjs.org">Next.js</a> Sass Starter</h1>E agora temos um ponto de partida Sass!
Semelhante a antes, você pode testar isso criando um novo projeto com o seu iniciador assim que todas as alterações estiverem no GitHub.
yarn create next-app [project-name] -e [GitHub URL]# ornpx create-next-app [project-name] -e [GitHub URL]Configurando a documentação Next.js Starter para fácil configuração
Sem dúvida, uma das coisas mais importantes sobre um Starter é a documentação.
Pode não ser tão importante se você estiver usando apenas isso. Mas se você quiser que outras pessoas o usem, você quer que eles saibam como usá-lo, ou então eles ficarão travados e frustrados.
A parte mais importante é configurar o Starter. Configurar seu Starter em um repositório GitHub é um ótimo primeiro passo. Mas se alguém quiser usar esse Starter, terá que clonar ou baixar esse repo e, em seguida, remover o histórico do git.
Em vez disso, você pode adicionar o comando que usamos acima em seu README.me arquivo para dar instruções às pessoas sobre como começar rapidamente, como:
## Getting StartedRun the following command to create a new project with this Starter:```yarn create next-app [project-name] -e https://github.com...# ornpx create-next-app [project-name] -e https://github.com...```Isso evitará que as pessoas que podem não entender como fazer algumas dessas coisas manualmente travem.
Também é importante adicionar qualquer documentação de opções de configuração que você adicionou.
Se você estiver adicionando algumas variáveis que permitem alterar alguns recursos de todo o site, certifique-se de adicionar notas sobre eles.
No final das contas, você deseja que as pessoas entendam como usar os recursos que você adicionou para tornar suas vidas mais fáceis. Se eles não entenderem, podem simplesmente extrair o código e fazê-lo manualmente.
Em última análise, criar e publicar um Starter significa tornar a vida das pessoas mais fácil. Quer seja você voltando ao Starter alguns meses depois ou um enxame de novas pessoas procurando se tornar produtivo, você está dando a eles uma experiência de desenvolvedor melhor adicionando boa documentação.
Algumas outras coisas a considerar
Generalizando recursos e adicionando configuração para um Next.js Starter
Adicionar recursos é uma ótima maneira de aumentar a probabilidade de uso do Starter. Se eu usasse um Starter para criar um novo blog, adoraria se esse Starter incluísse meu nome como autor e talvez até uma página Sobre mim.
Mas o que eu não gostaria é ter que substituir o nome de outra pessoa 100 vezes em todo o código para atualizar meu próprio projeto. Sem mencionar que ver esse nome no Starter pode me fazer sentir mais como se fosse o blog deles, em vez de um modelo que posso usar para meu projeto.
Considere começar usando um nome generalizado em todo o projeto. Em vez de usar o Blog de Colby Fayock em todo o Starter, torne-o Meu blog, o que fará com que pareça menos pessoal para o criador para a pessoa que usa o Starter.
Adicione também algumas opções de configuração. É muito mais fácil poder atualizar uma única variável que faria meu projeto incluir Colby Fayock em vez de Meu Blog do que pesquisar todos os arquivos para fazer essa alteração manualmente.
Escolha com cuidado onde ter opinião
Ao usar uma ferramenta como o Sass, há mais de uma maneira de usar essa ferramenta. Se você configurar uma estrutura de projeto incrivelmente específica e opinativa, estará alienando as pessoas que usam o Starter.
Isso os forçará a retrabalhar todo o projeto ou fará com que eles queiram excluir um monte de código que pode fazer com que evitem usá-lo no futuro.
Você pode criar iniciantes opinativos, mas escolha sabiamente onde injetar essas opiniões. Isso tornará seu trabalho utilizável por um grupo maior de pessoas que desejam ser produtivas.
Se você deseja criar algo muito opinativo, considere dar um nome diferente e usar a ferramenta como parte do nome. Por exemplo, eu poderia criar um Sass Starter opinativo chamado Colby’s Sassy Next.js Starter.
Você criou um novo Starter?
Compartilhe comigo no Twitter!
