thnkrn/next-ts-template

Boilerplate for Next JS Framework with TypeScript

Next.js Template - Targeted for client-side

The main aim of this template is to be able to start on Client-side only website as quick as possible with great DX.

Template Structure

• Volta is supported and recommended for Node version management.
• Bootstrapped with Create Next App and its typescript template.
• UI Library: targeted built app to be powered by Preact and use React for development for better debugging.
• Styling: use CompiledCSS, provides atomic css generation, with no runtime cost, on build and common development API, similar to other CSS in JS libraries.
• Linting configuration based on Create Exposed App with personal modification.
• Editor - VSCode with format on save by Prettier + fix all with Eslint.
• Suggested Node version 16+.
• Git hook integrated with Husky.
• Pre-commit #1: Uses Commitlint for consistent commit messages.
• Pre-commit #2: Uses Lint Staged to run npm run lint, npm run prettier and npm run test:staged on staged files.

Available Scripts

In the project directory, you can run:

npm ci

Installs the packages.

npm start

Runs the Next.js development mode (SSR).
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the Jest test runner in the interactive watch mode.
See the section about running tests for more information.

npm run test:ci

Launches the Jest test runner and collect code coverage.
The coverage result will be in the coverage folder.

npm run build

Builds the app for production to the .next folder.
It correctly bundles Preact in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

npm run export

Exports the build from npm run build step to a static web contents, enable client-side only deployment. The output will be in the out folder.

npm run analyze

Builds the app in production mode and analyze the js bundles. The analysis result will be in .next/analyze folder.