Next.js Full-stack web app starter template 2024
Hey guys 😃, are you planning to build a full-stack web application? If so, you’ve landed on the perfect blog post! I’m happy to introduce you to a Next.js full-stack starter template that I have designed to streamline the process of creating a modern, feature-rich web application and eliminate the time spent on setting up the boilerplate needed to kick off your project.
This starter template is tailored for Next.js 14, the latest version. Whether you’re a seasoned developer or just starting out, this starter template along with Next Js capabilities, offers an intuitive framework that simplifies the development process for building dynamic and interactive full-stack web applications.
With this starter template, you can focus on whats important and kickstart your project faster. 🚀
The link to the starter template GitHub repository can be found below:
How to use this template? 🤔
Getting started with this Next.js Full-stack starter template is super straight forward. Simply head over to the GitHub repository linked above and follow the steps outlined in the README file. There, you’ll find detailed setup instructions along with any prerequisites necessary to get the project up and running.
Main Features 🚀
In this section, lets dive into the features of this template. The main features of this template are as follows:
- Scalable project structure 📈
- TypeScript enabled ✅
- Pre-configured Ant-Design component library 🐜
- Structured styling with SASS modules and global variables 💅
- Social authentication and route guarding 🔐
- Sample APIs with database integration 🗂️
- Custom alias imports 📥
Tech-stack used for this template
Having a well organized project structure is super important for the scalability and maintainability of any codebase. By structuring the project folders and files logically, developers can easily locate and modify specific components, services, or any other files. The following screenshot shows the folder structure of the template. In this section, we will have a look at the purpose of each of the folder.
Folder structure
“Root level” folders:
- Public — To store any public assets such as images and fonts.
- Src — All the main source files and folders are grouped inside the src.
“Src level” folders:
- App — Contains the page routes and API routes.
- Components — Atomic design pattern is used in this folder to maintain components in a structured manner.
- Constants — To store all common/shared constants.
- Layouts — All layouts including the main layout is placed in this folder.
- Models — To store database schema models.
- Providers — All providers such as the auth provides and theme provider is placed in this folder.
- Services — Service layer is maintained in this folder which has a set of functions to call the APIs.
- Styles — Global styles and style variables are placed in this folder.
- Types — Typescript types are place in this folder.
- Utils — Utility functions or helpers can be placed in the utils folder.
Typescript is enabled in this project for a better developer experience and to maintain type safety. You can use JavaScript as well if you prefer, since the allow “allowJs” flags is set to true. If you do not want to allow Javascript usage, you can set it to false.
The global types are defined in src/types/global.d.ts file.
src/types/global.d.ts
The Ant Design (AntD) component library is set up and pre-configured in this template. AntD is filled with stylish and practical components which can be used as the main building blocks for your web application. It saves you the hassle of designing every element from scratch and help you to cut down on development time.
The AntdConfigProvider.tsx handles the top level configuration of the AntD library. The primary colour for the library is configured as a global style variable. To customize the primary color, all you have to do is to modify the hex of the $primary-color variable in src/styles/variables.module.sass.
This template has structured styling using SASS modules and global variables. SASS modules allow for encapsulated styling, making it easier to manage stylesheets by keeping styles scoped to individual components.
Global variables streamline the process of defining and reusing common styles across your project, promoting consistency in your styles. With SASS modules and global variables, you can maintain clean and organized styles.
Social authentication enables users to sign in to your web application using their existing social media accounts, such as Google, Facebook, or Twitter. To achieve social authentication, this template is integrated with the NextAuth.js authentication library.
This template is pre-configured with two social auth providers, Google and Github, but you have the freedom to extend it to use any other platform you prefer. To add a new provider, all you have to do is configure a new provider here, src/app/api/auth/[…nextauth]/route.ts.
src/app/api/auth/[…nextauth]/route.ts
Route guarding: Route guarding allows us to protect certain routes within our application, ensuring that only authenticated users can access private routes and endpoints. Route guarding is implemented using a middleware approach. By intercepting requests, the middleware verifies the user’s authentication status before allowing access. You can extend this middleware to perform role-based access control as well.
src/middleware.ts
The template consist of few sample API endpoints covering basic CRUD (Create, Read, Update, Delete) operations for a TODO list. These APIs serve as a practical demonstration of how to implement API endpoints in this project.
Sample TODO app with basic CRUD operations
Each API method in is placed in it own file as shown in the screenshot below for better separation of logic. You can also place all the API methods in a single file as well if you prefer it that way.
Database integration with MongoDb: The mongoose library is used to connect to the database and work with it. The database models can be found in src/models folder. You can easily extend it to add your own models as needed.
src/utils/database.ts
Custom alias imports are configured for the project using the tsconfig.json file. These aliases serve as shortcuts for module paths, allowing you to import files with ease and avoid the cumbersome directory traversal (Example : “../../../example.ts”). With custom aliases in place, your import statements become cleaner and more readable. It’s a small tweak that makes a big difference in keeping your project imports organized as your project scales up.
Alias import example
The tsconfig.json configuration is as follows, the paths attribute under compilerOptions allows us to customize the alias. You can add more here if you decide to add new folders to your project.
tsconfig.json
As explained in this blog, I’ve aimed to eliminate the burden of boilerplate setup and help developers to focus on what truly matters. I really hope that you will find this template useful and will help you in your next project! 😊
For further clarifications or assistance, feel free to reach out via [email protected] or connect with me through LinkedIn, https://www.linkedin.com/in/devon-wijesinghe. Cheers! 🤜🤛
Stackademic 🎓
Thank you for reading until the end. Before you go: