Motivation

Documentation for the Next.js Starter Template

Background

Over the course of my web development journey, participating in hackathons and working on various projects with student organizations, I've accumulated a wealth of knowledge and developed a list of best practices to streamline my work. This includes insights into design-dev integration, test-driven development, content management systems, back-end integration, documentation websites, and more.

I have an extremely strong 'Solve the Problem First' approach with a Design Thinking mindset. I plan and research thoroughly to the extent of my knowledge in order to minimize wasted effort later down the line. I believe that clear and concise expectations combined with well thought-out architecture + guardrails make for an excellent developer experience. I use Agile as a tool to stay organized and track progress. I place heavy emphasis on aggressively tackling communication challenges, which I've found to almost always be the root cause of all problems in software development.

Limitations with Starter Templates/Boilerplates

Given the aforementioned philosophy, decision fatigue tends to be a significant challenge, which is resolved to some extent by starter templates.

The biggest issues with starter templates are that they are not really modular. They're amazing, until they begin to diverge from your projects' requirements.

You start with what you get and then have to manually either add/remove things, or modify them.

There are many opinion-driven or situation-driven decisions to make along the way, and unfortunately that's where starter templates begin to quickly lose out.

This project was inspired by a few other projects:

• Blazity/next-enterprise
• ixartz/Next-js-Boilerplate
• NextBase Starter
• Precedent
• Built at Lightspeed
• Blitz.js
• OpenLogic
• Component party
• CodebaseShow

These projects served as excellent references for me to learn web development tooling + best practices. I found that they all have many things in common such as:

• TypeScript configured with path aliasing
• Tailwind CSS for styling
• Prettier for code formatting
• ESLint for linting code
• Husky to easily configure Git hooks
• Lint-staged for running linters on Git staged files
• Commitlint for linting commit messages
• Semantic Release for automated versioning and changelog generation
• Jest for Unit and Integration testing
• Playwright for End-to-End testing
• CI/CD pipelines with GitHub Actions
• Easy deployment to Vercel

I needed all of the above, with the addition of the following:

• Commitizen to provide a CLI for Conventional Commits, allowing others to contribute to the project while learning the specification at the same time
• Fumadocs for beautiful and easily browsable project documentation
• Storybook for Component-Driven Development, along with Accessibility Testing, Interaction Testing, and Coverage Testing
• Chromatic for Visual Regression Testing
• Sanity for Headless CMS (Content Management System)

I hadn't found a single starter template that included all of the above, so I decided to create my own.

Another pain point was that the templates would be package manager specific. If they were using npm or yarn, I'd have to manually convert them to pnpm.

Choosing ORMs, API layers, and Databases was where the real fun started, and the templates didn't really help with that. I needed something that would educate me on the pros and cons of each choice. If you'd like to get an idea of what I mean by 'decision fatigue', check out the Roadmap.

As of right now, this project is a work in progress and I am still figuring out what I want to include in it. It's very front-end heavy, reflective of the stage that I am in of my development journey. I will continue to add and document other technologies as I gain experience in them.