template-next.js-chakra-ui

An opinionated Next.js project template using Chakra UI



Creating projects from scratch is tiring, and most templates don't suit my common needs, so I create one myself. This is a very opinionated template yet trying to keep it barebone, customizable, and with extra stuff here and there.
This template is based on my landing page repository. View the non-Chakra UI version on https://github.com/grikomsn/template-next.js.

Features

Usage

Scaffold using degit

$ npx degit grikomsn/template-next.js-chakra-ui

Create from GitHub template

Click the "Use this template" green button to create a new GitHub repository using this template.

Scripts

Here are premade package.json commands which covers most use cases:
CommandDescription
now-buildBuild command for Vercel deployment
buildRun build commands with loading env vars from .env
build:assetsPart of build command, builds assets and manifests
build:webPart of build command, builds the Next.js project
cleanRemove generated assets and caches
developStart Next.js development server
formatRun format commands
format:indexFormat top-level sources (*.{js,json,md})
format:scriptsFormat all sources in scripts directory
format:srcFormat all sources in src directory
contributors:addAdd a contributor to the contributor list
contributors:generateRegenerate contributor list in readme
prepareRuns yarn format

Configuration

Remove unused packages and sources

You can remove react-markdown dependency and @/utils/renderers source since it's only used for generating and rendering the home page contents from the readme markdown.

Change site config

The site config is located in ~/site-config, which will be used for default SEO values, generating favicons, manifests, and so on.

Change Chakra UI settings

The ColorModeProvider is manually set to dark since Chakra UI has issues with server-rendered stylings. You can change the color mode and other layout markups in @/pages/_app.
As for the theme, you can change the values in @/theme.
The Link component has a isNextLink boolean prop which you can choose whether the given href is a Next.js page or an external one, so no need to write double tags for the next/link tag and the real anchor tag:
<Link href="/" isNextLink>Home</Link>
<Link href="/sitemap.xml">Sitemap</Link>
You can change the Link props type and the orignal anchor component in @/components/link.

Change routes in navbar

The routes in navbar are located in @/routes. Entries are arrays so you can use the children with React components if needed.

Change sitemap routes

The sitemap routes does not use the @/routes file so you can customize what routes to be included in the sitemap file. You can modify the sitemap routes in ~/scripts/build-sitemap.

Change assets (social image and icon)

You can replace the social image in ~/public/social.png and the page icon in @/assets/icon.png.

Change VS Code workspace settings

You can modify VS Code workspace settings in ~/.vscode/settings.json