A template for lightning-fast full-stack app development
Dec 6 2022 · 4 min read · Comments
Instead, we should focus on building the product itself. So I did all the dirty work, so you don't have to.
Here is my Next.js starter template, which I use for all my projects. Credit goes to the exceptional open-source maintainers who created all the great libraries. I simply wired them together.
Here are the principles I followed when making every technology choice in this template.
- World-class developer experience
- Tight feedback loops
- Pit of Success
- Focus on building the product, not managing the infrastructure
- Speed of iteration over flexibility
🧰 The stack
Knowing the principles for each decision, here's the set of technologies you will find in the template.
- ⚛️ Next.js - the fullstack framework for JS/TS. It has, by far, the most active community and development.
- 🚀 Typescript - for the superior developer experience and to catch issues early.
- 🎨 Tailwind CSS - never write CSS again. Ship as little as possible to the client. Works great with Tailwind UI and headless UI.
- 🔗 tRPC - end-to-end typesafe APIs. This setup makes it easy to test procedures in isolation.
- 🌍 React Query - the best server state management library. The template includes a
useMutationhook that makes optimistic updates an absolute breeze. The setup is inspired by the recommendations of TKDodo's series.
- 🔒 NextAuth.js - trivial authentication for Next.js apps while owning all of your data.
- 📙 Prisma - the best ORM for Typescript. This template assumes you'll be using PostgreSQL.
- 🐳 Docker - enabling 100% offline development using a local PostgreSQL DB and an email server via MailHog.
- 🃏 Jest - unit tests with React Testing Library and msw. Integration tests that can talk to an ephemeral PostgreSQL database. Coverage is automatically collected.
- 🚢 GitHub Actions and Vercel - linting, testing, and full preview and production deployments.
- 🌳 Dependabot - to keep all your dependencies up to date.
🏎️ Get started
Create a new Next.js project using this starter template. You can use either
yarn create next-app --example https://github.com/dsaltares/next-starter <your_app_name> npx create-next-app --example https://github.com/dsaltares/next-starter <your_app_name>
Set up your local environment variables.
cp .env.sample .env
Spin up infrastructure dependencies locally.
Start the development server.
Run all tests, only unit tests or only integration tests.
yarn test yarn test:unit yarn test:integration
Run tests in watch mode and break stuff!
yarn test:unit --watch
The local development database is persisted locally in the
🚀 Wrapping it up
At the end of the day, this is my personal Next.js starter template. I could have used a different set of technologies and configuration, but ultimately, this is what works best for me. I am also aware of the similarities with the T3 stack. However, my template is more opinionated about testing, deployment and other development workflows.
🙌 Thanks for reading! I hope you find the template useful by working with it directly or as inspiration for your setup.