Next.js TypeScript starter

Introduction · Installation · Tech Stack & Features

Introduction

A Next.js TypeScript starter that includes a collection of reusable components, hooks, and utilities to build amazing projects with complex animations and page transitions using GSAP.

Installation

Yarn

git clone [email protected]:gcolombi/nextjs-typescript-starter.git project-name
cd project-name
yarn install

NPM

git clone [email protected]:gcolombi/nextjs-typescript-starter.git project-name
cd project-name
npm install

Warning This starter use npm:gsap-trial. If you want to deploy it you need to remove ShuffleTextInOut and ImplodeExplodeInOut components because they use bonus plugins, as well as the actual gsap package. Install gsap package without these components or join the Club GreenSock, install the corresponding package using installation steps in the dashboard and use them.

Tech Stack & Features

Framework

• Next.js - React framework for building performant apps with the best developer experience

Language

• TypeScript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale

Hosting

• Vercel - Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration

UI

• CSS Modules - CSS/SASS/SCSS - CSS architecture containing generic and base style, custom configuration, grid, utilities, mixins etc...
• GSAP - GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. A great place to get started with GSAP and React is to read GSAP with React, GSAP method gsap.context() and GSAP React Advanced Animation Techniques
• next-themes - Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
• @next/font - Optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance

Form

• Client side

  • react-hook-form - Performant, flexible and extensible forms with easy-to-use validation
  • react-toastify - Allows you to add notifications to your app
  • yup - Schema builder for runtime value parsing and validation

• Serve side

  • API Routes - The form request is managed by an API route using automatic bodyparsing or formidable (A Node.js module for parsing form data, especially file uploads)
  • Custom HTML template - Email template with placeholders ready to use
  • yup - Schema builder for runtime value parsing and validation
  • react-google-recaptcha-v3 - React library for integrating Google ReCaptcha V3 to your App. To use react-google-recaptcha-v3, you need to create a recaptcha key for your domain, you can get one from here
  • @sendgrid/mail - SendGrid delivers your emails through a cloud-based email delivery platform. To use Sengrid, you need to sign up here

Hooks

• useElementSize - This hook helps you to dynamically recover the width and the height of an HTML element. Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changes
• useIsMounted - A React hook to check if the component is mounted
• useIsomorphicLayoutEffect - A React helper hook to schedule a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering)
• useLocalStorage - Persist the state with local storage so that it remains after a page refresh. This can be useful for a dark theme. This hook is used in the same way as useState except that you must pass the storage key in the 1st parameter. If the window object is not present (as in SSR), useLocalStorage() will return the default value
• useLockedScroll - This React hook blocks scrolling on a page, a good example is when opening modals
• useScrollbar - A React helper hook to observe scroll position
• useSessionStorage - Persist the state with session storage so that it remains after a page refresh.
• useUnsavedChanges - Prompt the user if they try and leave with unsaved changes
• useWindowLocation - This React Hook retrieves window location
• useWindowSize - This React Hook retrives window dimensions also works on resize

Code Quality

• Prettier - Opinionated code formatter for consistent code style
• ESLint - Pluggable linter for Next.js and TypeScript