A Next.js starter to satisfy your development cravings

Banquet is configured for an excellent developer experience, and includes a feast of tooling and presets for building on the modern web.

Free and open-source under an MIT License. Photo by Cody Chan on Unsplash.

Features

Modern DX with Typescript, Next.js, Chakra UI & React Icons

Banquet is built with Next.js to deliver fast performance, variable routing, static and/or server rendering, and more. All pages and components are written in Typescript, allowing for a more robust development experience.

Banquet also includes Chakra UI and React Icons for flexible, accessible, and easy to use UI components and hooks. And with Chakra’s theme provider, it’s easy to define default colors, sizes, fonts, etc., and access them from anywhere in your project.

Customized Components

Banquet also adds custom components like an Image Modal and Carousel not available in the core Chakra library. See examples below, and click on the images to trigger the modals.

Image Modal

Click to Enlarge

Carousel

1 / 5

CSS Modules + SASS Support

Banquet supports both default SCSS/SASS and S/CSS modules, with no compiling or configuration needed. Use Chakra UI's inline styling shortcuts, create isolated CSS modules, or store and link your styles separately, all without any extra work.

Preconfigured Jest + React Testing Library

Banquet is preconfigured with Jest and React Testing Library to allow for fast and isolated unit testing, and combines with Husky and lint-staged to ensure all tests pass on every commit. And when creating new components and pages with Plop (see below), Banquet will automatically generate a test file for you.

Plop.js Templates + Code Generator

Banquet comes with a bake command to invoke a CLI code generator called Plop. You can use it to add new components, tests, pages, etc., based on the included .hbs templates—or create ones yourself! See examples below.

1 / 3

Linting, Formatting, and Type-Checking: Automated Code Checks with Husky

Banquet comes with Husky built-in. Husky makes configuring Git Hooks easy, and allows you to automate scripts or processes before you commit, push, etc. By default, Banquet's hooks are:

Pre-Commit: Runs ESLint, Prettier, and any tests related to files that are staged, based on configurations at the root of the project.
Pre-Push: Runs type-checking for all relevant TypeScript files, based on configurations at the root of the project.

These automated checks will help catch errors and warnings before your code leaves your machine, and add a consistent framework for larger teams to work from.

Start building with Banquet

Getting started with Banquet is easy: just clone the code and install dependencies.

Use the site (the one you’re currently reading!) as a template, or delete the pre-made content and create your own from scratch. Useful presets are already in place for code creation, linting/formatting, testing, and customizing the theme to your tastes.

git clone https://github.com/timmybytes/banquet.git
cd banquet
yarn # or npm install