Full-stack starter template 2024. Contribute to wdevon99/Next-js-starter development by creating an account on GitHub.

[github.com](https://github.com/wdevon99/Next-js-starter)

Scalable Project Structure

An organized project structure is crucial for the scalability and maintainability of any codebase. By logically arranging project folders and files, developers can easily find and modify specific components, services, or other files. Below is a screenshot of the folder structure of the template, along with descriptions of each folder's purpose.

“Root Level” Folders:

• Public: Stores public assets such as images and fonts.
• Src: Houses all the main source files and folders.

“Src Level” Folders:

• App: Contains page routes and API routes.
• Components: Employs an atomic design pattern to organize components systematically.
• Constants: Holds shared constants.
• Layouts: Includes all layouts, including the main layout.
• Models: Contains database schema models.
• Providers: Houses providers like authentication and theme providers.
• Services: Contains a service layer with functions for API calls.
• Styles: Contains global styles and style variables.
• Types: Houses TypeScript types.
• Utils: Contains utility functions or helpers.

TypeScript Support

This project is equipped with TypeScript to enhance the developer experience and ensure type safety. JavaScript can also be utilized if preferred, as the "allowJs" flag is set to true. If you wish to disable JavaScript usage, you can change it to false.

Global types are defined in the src/types/global.d.ts file.

Pre-configured Ant Design Component Library

The Ant Design (AntD) component library is pre-configured in this template. AntD provides a range of stylish and functional components, serving as essential building blocks for your web application, thus saving time on design.

The AntdConfigProvider.tsx manages the top-level configuration for the AntD library. The primary color for the library can be customized by modifying the hex code of the $primary-color variable in src/styles/variables.module.sass.

Organized Styling with SASS Modules and Global Variables

The template features structured styling through SASS modules and global variables. SASS modules facilitate encapsulated styling, making it simpler to manage stylesheets by keeping styles confined to individual components.

Global variables help in defining and reusing common styles throughout the project, promoting consistency. With SASS modules and global variables, you can maintain organized and clean styles.

Social Authentication and Route Protection

Social authentication allows users to log into your web application using existing social media accounts like Google, Facebook, or Twitter. This template integrates the NextAuth.js library for authentication.

Authentication for Next.js

[next-auth.js.org](https://next-auth.js.org)

The template is pre-configured with two social authentication providers, Google and GitHub, but you can easily add others as desired. To include a new provider, configure it in src/app/api/auth/[...nextauth]/route.ts.

Route Protection: Route guarding ensures that only authenticated users can access certain routes within your application. This is implemented using middleware that checks the user’s authentication status before granting access.

Sample APIs with Database Integration

This template includes several sample API endpoints that cover basic CRUD (Create, Read, Update, Delete) operations for a TODO list, providing a practical demonstration of how to implement API endpoints.

Each API method is housed in its own file for better logical separation, though you can also consolidate them into a single file if preferred.

Database Integration with MongoDB: The mongoose library is used to connect and interact with the database. You can find the database models in the src/models folder and easily extend them to include your own models as needed.