Next Ts Starter

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.js file 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 styles folder 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.ts file.
• 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/react for running tests. It is pre-configured with ts-jest to check your types in tests. jest-styled-components is 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 the Cypress.env helper. It also supports per-environment configuration files.

Installation

To install the Next Starter, follow these steps:

1. Start by cloning the repository:

   git clone [repository_url]
   

2. Install the required dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:3000 to view the application.

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.