Nextjs Starter
A Next.js starter that includes a collection of reusable components, hooks, and utilities to build amazing projects with complex animations and page transitions using GSAP.
Overview:
This Next.js starter is designed to provide developers with a collection of reusable components, hooks, and utilities for building projects with complex animations and page transitions using GSAP. It includes installation instructions and a warning for using the npm package "gsap-trial" and deploying the starter.
Features:
- Framework: Next.js - a React framework for building performant apps
- Hosting: Vercel - a platform for frontend developers with speed and reliability
- UI: CSS Modules - a CSS architecture for generic and base styles, custom configuration, grid, utilities, and mixins
- Animation: GSAP - an industry standard JavaScript animation library from GreenSock
- Dark Mode: next-themes - enables dark mode in just 2 lines of code, supports system preference and other themes
- Fonts: @next/font - optimizes fonts and removes external network requests for improved privacy and performance
- Form: Client-side react-hook-form - performant and flexible form handling with easy-to-use validation
- Notifications: react-toastify - adds notifications to your app
- Form Validation: yup - a schema builder for runtime value parsing and validation
- Server-side API: API Routes - manages form requests with automatic body parsing or formidable for parsing form data and file uploads
- Email Template: Custom HTML template - includes placeholders for easy use
- Google ReCaptcha: react-google-recaptcha-v3 - integrates Google ReCaptcha V3 to your app with a domain-specific key
- Email Delivery: @sendgrid/mail - delivers emails through a cloud-based platform
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Vercel
Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.