Introduction

Hello, world! Welcome to the Nextra + Mantine template.

This is a starter template for Next.js  app router + Mantine  + Nextra  documentation site.

Features

This template comes with the following features:

• PostCSS  with mantine-postcss-preset 
• TypeScript 
• Storybook 
• Jest  setup with React Testing Library 
• ESLint setup with eslint-config-mantine 
• Provides API example in /api/version

Nextra Features

• Nextra  documentation site with Mantine theme
• Sync Dark mode between documentation and application (Mantine/Nextra)
• Customizable components in components folder
• Provides new Navigation and Footer components for Nextra documentation site

Folder structure

You will find a lot of predefined folders and files in the project. Here is a short description of the most important ones:

• app
  • apiUseful API
  • layout.tsxMain layout
  • page.tsxHomepage
• componentsUseful components
• config
  • index.tsMost of the config are here!
• contentMDX docs

You can start by changing the main configuration in config/index.ts file. This file contains the most important configuration for the project.

npm scripts

Build and dev scripts

• dev – start dev server
• build – bundle application for production
• analyze – analyzes application bundle with @next/bundle-analyzer 

Testing scripts

• typecheck – checks TypeScript types
• lint – runs ESLint
• prettier:check – checks files with Prettier
• jest – runs jest tests
• jest:watch – starts jest watch
• test – runs jest, prettier:check, lint and typecheck scripts

Other scripts

• storybook – starts storybook dev server
• storybook:build – build production storybook bundle to storybook-static
• prettier:write – formats all files with Prettier