Welcome to my Next.js Template! This repository provides a robust starting point for building modern web applications using Next.js, React, and TypeScript. It comes pre-configured with a set of libraries and tools that streamline development, enhance productivity, and provide a solid foundation for your projects.
This template is designed to save you time and effort by setting up a comprehensive development environment from the get-go. It includes a suite of libraries and tools that are commonly used in modern web development, ensuring you have everything you need to start building your application right away.
- Pre-configured Development Environment: The template includes essential libraries and tools with default configurations, allowing you to jump straight into development without additional setup.
- Customizable: All libraries and configurations are easily removable or replaceable, giving you the flexibility to adapt the template to your specific needs.
- VS Code Snippets: A collection of handy code snippets is included to boost your productivity and streamline coding tasks.
A powerful React framework for building server-rendered and statically generated applications.
With additional integrations:
- React Query: For data fetching and state management.
- React Hook Form: For handling forms efficiently.
A strongly typed programming language that builds on JavaScript, providing static type definitions.
A utility-first CSS framework for creating custom designs quickly, with additional tools:
- CLSX: Utility for conditionally joining class names.
- TWMerge: Utility for merging Tailwind CSS class names.
A component library for building user interfaces with a consistent design system.
A static code analysis tool for identifying and fixing problems in JavaScript/TypeScript code, with custom configurations using my plugin.
A library for making all environment variables type-safe in TypeScript projects.
A TypeScript-first schema declaration and validation library, with an additional utility:
- Zod Fetcher: A utility for data fetching with Zod.
A small, fast, and scalable state management tool for React.
A Vite-native test framework for fast and reliable testing.
A collection of beautiful, consistent icons for your projects.
This template includes a set of custom VS Code snippets to enhance your development workflow.
These snippets are editable and can be customized according to your needs.
To use the snippets, simply type the snippet prefix in a file and press Enter to expand it.
comp: Creates a React functional component.prop: Defines a TypeScript type for component props.cn: Utility for combining Tailwind CSS class names.func: Creates an arrow function.exd: Exports a default value.ex: Exports a named value.im: Imports a module.ust: Defines a React useState hook.uef: Defines a React useEffect hook.page: Creates a new page component.layout: Creates a layout component.
This template includes several file templates to help you get started quickly. These templates are customizable and can be modified to suit your project's requirements.
The only requirement is to have the Blueprint VS Code extension installed.
Then, you just need to right click in the explorer and select New File from Template, and choose the template you want to use.
Component: Creates a new React functional component separated in 3 files (component, type, and index).Page: Creates a new Next.js page component.Layout: Creates a new layout component.
Clone the Repository:
git clone https://github.com/maxencebonamy/frontend-template.git
cd frontend-templateInstall Dependencies:
pnpm iRun Development Server:
pnpm devOpen in VS Code: Launch the project in Visual Studio Code to start using the pre-configured snippets and development environment.
Feel free to modify and adapt the template to fit your needs. Happy coding!