This is the Next.js starter template that I use for all my new web applications.
These are the principles I followed to make technology and config choices:
- Excellent developer experience
- Tight feedback loops
- Pit of success
- Focus on building the product, not managing the infrastructure
This template wires a bunch of technologies together to facilitate a great user and developer experience.
- ⚛️ Next.js - the fullstack framework.
- 🚀 Typescript - for the superior developer experience and to catch issues early.
- 🎨 Tailwind CSS - never write CSS again, ship as little as possibl to the client.
- 🔗 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
useMutation
hooks that makes optimistic updates an absolute breeze. - 🔒 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 - 100% offline development is enabled by a local PostgreSQL and email server.
- 🃏 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.
Yep, this is very similar to the T3 stack. However, I've created this to match my exact preferences.
Install dependencies:
Create a new Next.js project using this starter template. You can use either yarn
or npm
.
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.
yarn docker:up
Start the development server.
yarn dev
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 database
folder.
Please understand this is my personal Next.js starter template. Although I welcome issues and PRs with suggestions, I may reject them if they do not match the technologies I use or my preferred workflows.
Please do not be offended nor surprised if your contribution is not accepted.
By all means, feel free to draw inspiration from this template for your own project setup.