Documentação
Next.js
Começando
supastarter para Next 13 (roteador de aplicativos)
Este guia irá orientá-lo na configuração do supastarter para Next.js 13. Iremos passar pelo processo de clonagem do projeto, instalação das dependências, configuração do banco de dados e execução do servidor de desenvolvimento local.
Antes de começarmos, quero rapidamente revisar as ferramentas e bibliotecas que o supastarter utiliza.
- 🚀 TurboRepo (abre em uma nova aba) \
- 👨🏼
- 💻 Next 13 com app router (abre em uma nova aba) \
- 💽 Prisma (abre em uma nova aba) \
- 🔐 Lucia Auth (abre em uma nova aba) \
- 💅🏼 Tailwind CSS (abre em uma nova aba) \
- 🧩 Radix UI (abre em uma nova aba) \
- 📝 Contentlayer (abre em uma nova aba) \
- 💳 Stripe (abre em uma nova aba) ou Lemonsqueezy (abre em uma nova aba) \
- 📫 React Email (abre em uma nova aba)
Antes de começar, você precisará ter o seguinte instalado em sua máquina.
- Node.js (abre em uma nova aba) (v18 ou superior)
- Git (abre em uma nova aba)
- pnpm (abre em uma nova aba)
- VSCode (abre em uma nova aba) (recomendado, ou qualquer outro editor de código)
supastarter usa Prisma (abre em uma nova guia) como um ORM (camada de acesso ao banco de dados). Isso significa que você pode usar qualquer banco de dados suportado pelo Prisma, incluindo PostgreSQL, MySQL, SQLite e MongoDB. Você pode encontrar todos os bancos de dados suportados aqui (abre em uma nova guia).
Antes de criar um novo projeto supastarter, certifique-se de ter criado um novo banco de dados e ter a string de conexão pronta. Por exemplo, ao usar o PostgreSQL, a string de conexão terá uma aparência semelhante a esta:
postgresql://usuário:senha@host:porta/banco
Os provedores de banco de dados recomendados são Supabase (abre em uma nova aba), PlanetScale (abre em uma nova aba) e Neon (abre em uma nova aba).
Você também pode encontrar guias de configuração para determinados provedores no blog supastarter (abre em uma nova aba):
Durante o processo de configuração, você será solicitado a fornecer as seguinte informações:
- Nome do projeto
- Fornecedor do banco de dados
- String de conexão do banco de dados
Para criar um novo projeto supastarter, tudo o que você precisa fazer é executar o seguinte comando (substitua my-awesome-project pelo nome do seu projeto):
npx supastarter new my-awesome-project
Isso irá clonar o repositório supastarter, instalar todas as dependências e configurar o banco de dados para você.
Se você receber algum erro durante o processo de configuração, tente o processo de configuração manual em vez disso.
Agora o seu aplicativo deve estar pronto para funcionar. Para iniciar o servidor de desenvolvimento local, navegue até a pasta raiz do seu projeto e execute o seguinte comando.
Abra http://localhost:3000 (abre em uma nova aba) em seu navegador para ver o seu aplicativo.