Next.js TypeScript Template

An enterprise Next.js template application based on bulletproof architecture showcasing - Testing strategies, Global state management, Custom environments, a network layer, component library integration, server response caching, PWA support, localization, Custom App, Custom document, Custom offline fallback, and Continuous integration & deployment.

---

Expert teams of digital product strategists, developers, and designers.

---

We’re always looking for people who value their work, so come and join us. We are hiring!

• Global state management using redux-toolkit
• Side Effects using RTK Query
• API calls using api-sauce
• Styling using styled-components
• Reusing components from Ant design
• Translations using lingui

• Global state management using Redux Toolkit

  Take a look at the following files

  • store/slices/repos.ts

• Getting state from the redux store and dispatching actions to store using React Redux

  Take a look at the following files

  • store/index.ts

• Side effects using RTK Query

  Take a look at the following files

  • utils/apiUtils.ts
  • features/repos/api/getRecommendations.ts
  • features/info/api/getRepoInfo.ts
  • features/repos/components/RepoList/index.tsx

• API calls using Api Sauce

  Take a look at the following files

  • utils/apiUtils.ts
  • features/repos/api/getRecommendations.ts
  • features/info/api/getRepoInfo.ts

• Styling components using Styled Components

  Take a look at the following files

  • common/styled/index.tsx
  • common/Clickable/index.tsx
  • common/T/index.tsx

• Reusing components from Ant design

  Take a look at the following files

  • common/Loader/index.tsx
  • containers/Repos/index.tsx
  • features/repos/components/RepoList/index.tsx

• Translations using Lingui

  Take a look at the following files

  • translations/en.json
  • common/T/index.tsx
  • features/info/components/RepoInfo/index.tsx

• CI/CD using Github Actions. The CI pipeline has the following phases

  • Checkout
  • Install dependencies
  • Lint
  • Test
  • Build
  • Lighthouse CI

  Take a look at the following files

  • .github/workflows/ci.yml

• Testing is done using the @testing-library/react.

  Take a look at the following files

  • jest.config.js
  • jest.setup.js
  • common/Clickable/tests/index.test.tsx
  • common/For/tests/index.test.tsx
  • features/repos/components/RepoList/tests/index.test.tsx

• Development: yarn dev

• Production: yarn start

• Production: yarn build

• @features -> features/
• @slices -> store/slices/
• @store -> store/
• @common -> common/
• @themes -> themes/
• @utils -> utils/
• @containers -> containers/

Take a look at the following files

• next.config.js

• pages/index.tsx

• pages/_document.tsx

• pages/_app.tsx

• pages/_offline.tsx