Banquet is an opinionated Next.js starter and boilerplate that front-loads TypeScript, Chakra UI, testing, and code-generation tooling so you can scaffold a new project with minimal configuration.
What is Banquet?
Banquet is an open-source boilerplate for creating Next.js projects, maintained on GitHub by timmybytes. It combines Next.js and TypeScript with Chakra UI and React Icons for styling, Jest and React Testing Library for testing, Plop.js for code generation, and Husky with lint-staged for git hooks. The project takes a fresh clone as input and produces a configured Next.js app with these defaults ready to use.
Key Features
- Next.js + TypeScript — A React framework with type checking out of the box; the pages directory follows Next.js conventions.
- Chakra UI and React Icons — An accessible component library and icon set, with a theme split into colors.ts, fonts.ts, and other scalable files.
- CSS Modules with SCSS/SASS — Modular styling support alongside Chakra's inline styling, with preconfigured SCSS import handling.
- Jest + React Testing Library — Testing defaults that include basic component test templates; these tests are meant to be replaced with your own.
- Plop.js code generator — Run
yarn baketo generate new component directories with .tsx, .test, .scss, and index.ts files, or new pages. - Husky + lint-staged git hooks — Pre-commit and pre-push hooks run ESLint, Prettier, tsc type checking, and tests on staged files.
- Path aliasing — Configured aliases such as @components, @data, @pages, @public, @test, @styles, @theme, @utils, and @ (root) simplify imports.
- Self-hosted fonts — Includes Inter and Playfair Display via @fontsource, with instructions to add more fonts.
Who is it for?
Banquet is aimed at developers who want a preconfigured Next.js environment without spending time wiring up tooling. It suits teams that need testing defaults, developers who like using code generators like Plop, and anyone who prefers a component library like Chakra UI for rapid UI development.
What can you do with Banquet?
- Scaffold a new project: Clone the repo, run
yarn, thenyarn devto start a development server on port 3000. - Customize metadata and SEO: Edit SiteData.tsx and the CustomHead component to update meta tags, Open Graph information, favicons, and header/footer links.
- Generate components and pages: Run
yarn bakeand choose from included Handlebars templates to scaffold new components, tests, or pages. - Extend theming and fonts: Change Chakra theme files under src/theme, or install and import additional @fontsource fonts for self-hosting.
How does Banquet work?
Banquet follows a typical Next.js project layout. Configuration files for jest, eslint, prettier, next, and typescript live in the root directory, while src contains assets, components, data, pages, and theme files. The pages directory must follow Next.js routing rules, and the Chakra Provider wraps the app inside _app.tsx with a custom Layout component.
