Next.js TypeScript Template is a production-ready Next.js boilerplate from Wednesday Solutions that wires Redux Toolkit, RTK Query, apisauce, styled-components, Ant Design, and lingui into a single enterprise-grade starter.
What is Next.js TypeScript Template?
Next.js TypeScript Template is an open-source starter application built on Next.js and TypeScript. It demonstrates a "bulletproof" architecture for enterprise web apps: you get global state management, server response caching, a network layer, component library integration, localization, PWA support, custom App and Document, a custom offline fallback page, and continuous integration and deployment. The template is maintained by Wednesday Solutions and distributed on GitHub.
Key Features
- Global state management — Redux Toolkit store with slices, e.g., store/slices/repos.ts, and React Redux hooks to read state and dispatch actions.
- Server state and caching — RTK Query handles side effects and server response caching through utility files like utils/apiUtils.ts and feature APIs under features/repos and features/info.
- Network layer — apisauce wraps REST calls, used in features/repos/api/getRecommendations.ts and features/info/api/getRepoInfo.ts.
- Styling — styled-components powers the design system, with base components in common/styled, common/Clickable, and common/T, plus a themes directory.
- Component library — Ant Design components are reused and wrapped, including common/Loader and containers/Repos.
- Localization — lingui manages translations through JSON catalogs in translations/en.json and the common/T component for rendering localized text.
- Testing — Jest with @testing-library/react, with example tests under common/Clickable/tests, common/For/tests, and features/repos/components/RepoList/tests.
- CI/CD — GitHub Actions workflow at .github/workflows/ci.yml runs checkout, install dependencies, lint, test, build, and Lighthouse CI phases.
Who is it for?
- Enterprise development teams — use it as a ready-made foundation for a production Next.js app, skipping the setup of state, API, styling, and CI.
- Frontend architects — reference the folder structure and alias mapping in next.config.js to design scalable feature-based codebases.
- Next.js developers — study how Redux Toolkit, RTK Query, and apisauce combine with Next.js custom App, Document, and offline page.
- Product studios and agencies — spin up client projects with PWA support, localization, and automated quality checks already in place.
What can you do with Next.js TypeScript Template?
- Build a localized web app: add translations to JSON catalogs and use the common/T component with lingui to render text in multiple languages.
- Ship a resilient PWA: leverage the custom offline fallback page at pages/_offline.tsx and built-in PWA support to keep users working without a network.
- Automate quality checks: push to GitHub and the Actions workflow lints, tests, builds, and runs Lighthouse CI automatically.
- Accelerate feature development: follow the patterns in features/repos and features/info to add new API-backed features with the existing store, network, and styling layers.
How does Next.js TypeScript Template work?
The template organizes code into pages/, common/, features/, store/, and containers/, with alias paths like @features, @store, @common, @utils, and @containers configured in next.config.js. Run yarn dev for development, yarn build for a production static build, and yarn start to serve the production output. The custom _app.tsx wraps the app with providers and _document.tsx renders the full document, while _offline.tsx serves as a network-fallback page.
