Skip to content

An enterprise Next.js template application showcasing - Testing strategies, Global state management, Custom environments, a network layer, component library integration, localization, Image loading, Custom App, Custom document, IE 11 compatibility and Continuous integration & deployment.

Notifications You must be signed in to change notification settings

wednesday-solutions/nextjs-template

Repository files navigation

Next.js Template

An enterprise Next.js template application showcasing - Testing strategies, Global state management, Custom enviornments, a network layer, component library integration, localization, Image loading, Custom App, Custom document, IE 11 compatibility 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!

Out of the box support

  • Global state management using redux
  • Side Effects using redux-saga
  • API calls using api-sauce
  • Styling using emotion
  • Reusing components from Ant design
  • Translations using react-intl
  • Custom enviornments using emv-cmd
  • Image loading using next-images
  • IE 11 compatible

Global state management using reduxSauce

Implementing a Redux middleware using redux-sagas

Network requests using apisauce

Styling using emotion

Using antd as the component library

Localization using react-intl

Custom enviornments using emv-cmd

  • Custom enviornments using env-cmd for more flexibilty env-cmd

    Take a look at the following files

    Note:-

    1. To avoid confusion & conflicts, Please use custom enviornments only instead of next.js default enviornment setup

    2. To include env variables on the client side just add NEXT_PUBLIC before the enviornment variable name Example : NEXT_PUBLIC_SAMPLE_VARIABLE: some_value.

    Example usage for running dev server with .env.development env-cmd -f environments/.env.development next dev

Implementing CI/CD pipelines using Github Actions

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

    • Checkout
    • Install dependencies
    • Lint
    • Test
    • Build

    The CD pipeline has the following phases

    • Checkout
    • Install dependencies
    • Build
    • Deploy

    Take a look at the following files

Testing using @testing-library/react

Development

Start server

  • Development: yarn start:dev

  • Production: yarn start:prod

Build project (SSG)

  • Development: yarn build:dev

  • Production: yarn build:prod

Start Custom server

  • yarn custom:dev

Misc

Aliasing

  • @app -> app/
  • @components -> app/components/
  • @services -> app/services/
  • @utils -> app/utils/
  • @themes -> app/themes/
  • @store -> app/store/
  • @images -> app/images/

Take a look at the following files

Index page

Custom document

Custom app

About

An enterprise Next.js template application showcasing - Testing strategies, Global state management, Custom environments, a network layer, component library integration, localization, Image loading, Custom App, Custom document, IE 11 compatibility and Continuous integration & deployment.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published