Next Ts Starter
A Next.JS powered Typescript starter with styled components, styled-system, framer motion, jest and cypress
Overview
The Next Starter is a template designed to bootstrap your Next.js application. It comes pre-configured with various features and tools to enhance your development experience. This includes support for importing image files and fonts within webpack, NProgress loading bar functionality, styled-components for styling, styled-system for building reusable UI blocks, framer motion for smooth page transitions, and testing support with Jest and Cypress.
Features
- Next config: The starter comes with a pre-configured
next.config.jsfile that enables support for importing images files and fonts within webpack. It also includes NProgress support, which displays a small loading bar at the top of the page during loading. - Styled components: The template includes styled-components for styling your components. It provides a
stylesfolder to organize styled-components files and also includes themes-related content. This allows for consistent styling and theming throughout your application. - Styled system: The starter also includes styled-system, which allows you to build reusable UI blocks with a props API and consistent spacing and typography. It comes with a default theme file (
base.ts) where you can define breakpoints, spacings, and typography. - TypeScript support: The starter requires TypeScript version 4.1 or above. It utilizes the new Template Literal Types feature to provide autocompletion of the color prop based on the nested colors object. This allows for easy access to color options defined in your
colors.tsfile. - Framer motion: The starter comes pre-configured with framer motion, which handles Next.js page changes and enables smooth transitions when navigating between pages.
- Testing support: The template includes Jest and
@testing-library/reactfor running tests. It is pre-configured withts-jestto check your types in tests.jest-styled-componentsis also used to provide deterministic classNames within your styled components when testing. - Cypress support: The starter includes Cypress for end-to-end testing. It has sensible defaults and a custom plugin that allows you to inject your
.env*files in theCypress.envhelper. It also supports per-environment configuration files.
Summary
The Next Starter is a feature-rich template for bootstrapping Next.js applications. It provides a pre-configured setup with support for importing images and fonts, NProgress loading bar, styled-components for styling, styled-system for building reusable UI blocks, framer motion for smooth transitions, and Jest and Cypress for testing. With TypeScript support and an organized file structure, it offers a solid foundation for building robust and high-quality applications.
- 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
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- 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.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.