Next-js movie-app - Sample movie app using NextJS and TMDB as an API

Overview

Next.JS Boilerplate with Typescript and Redux Toolkit

A Next.JS Boilerplate in Typescript syntax with important libraries. This structure based on next-boilerplate.
Enhancements:

  • Added Material UI and removed Styled Component.
  • Added Cypress as e2e testing framework.
  • Added Atomic design structure (Atoms, Molecules, etc.).
  • Added Redux Toolkit (createSlice, createApi / RTK Query) and Redux Persist.
  • Added Internationalization config by Next.JS Internationalization and next-i18next, currently support [en, id]. example http://localhost/id or http://localhost/en. The default value is en.
  • Added form management with react-hook-form and yup library.
  • Moved _app/index.tsx, _document/index.tsx, _error/index.tsx, 404/index.tsx from folder to _app.tsx.
  • Updated all library to latest update (Next.JS v9 to v11, storybook, redux, etc).
  • Updated definition structure in service layer from multiple definition to single definition, example: Auth.d.ts.
  • Updated bundle analyzer setup to the latest way.
  • Removed Express JS.
  • Removed CLI Pankod.

About

Next.js is a minimalistic React framework that runs on the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating, it's also a straightforward way for developers with React experience to get productive quickly.

The advantage of this approach is to be able to create rich user experiences in a uniform way, without compromising SEO (Search Engine Optimisation) factors that are key to good ranking on Google and other search engines.

This boilerplate makes it easier to get up and running with a well-structured Next.js and TypeScript application.


Features

this project provides a lot of features out of the box. Here's an overview of the included components and tools.

Name Description
Next.JS Minimalistic framework for server-rendered React applications.
Storybook An open source tool for developing UI components in isolation for React.
Typescript Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
Redux A predictable state container for JavaScript apps with Redux Thunk and Redux Persist.
Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development
React Hook Form & Yup Form management
Material UI React components for faster and easier web development.
Docker A tool designed to make it easier to create, deploy, and run applications by using containers.
Babel The compiler for next generation JavaScript.
ESLint The pluggable linting utility.
Bundler Analyzer Visualize the size of webpack output files with an interactive zoomable treemap.
Jest Javascript testing framework , created by developers who created React.
React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices.
Cypress Javascript automation testing framework.
next-runtime-dotenv Expose environment variables to the runtime config of Next.js
next-i18next An internationalization-framework which returns the value for the current language.
Next Internationalization Supporting internationalization in next route

Branches

branch name Description
main Main branch with material UI Stable version
v5-material-ui Main branch with material UI v5 / @mui

Setup and Usages

Run this script npm install or yarn install and then to run this project npm run start:dev or yarn run start:dev.

This project provides somes scripts:

Script Description
npm run start Running this project in production environment.
npm run start:dev Running this project in development environment.
npm run start:doc Running this project as component documentation.
npm run start:analyze Analyzing existing bundle by bundle size visualization in the terminal.
npm run test:unit Running unit testing with Jest.
npm run test:e2e Running end to end testing with Cypress.

Recommended Visual Studio Extensions:

  • Jest
  • Jest Snippets
  • GitLens - Git supercharge
  • Prettier
  • JavaScript (ES6) code snippets
  • JavaScript and Typescript Nightly
  • ESLint
  • One Dar Pro (theme)
  • Material Icon Theme

Environment

Key Description Example value
NEXT_PUBLIC_API_URL API url http://192.168.1.3:8080
BUNDLE_ANALYZE Determine to open bundle visualization in browser or not true / false

Folder Structure

Folder Description
.storybook Storybook configuration
coverage Jest coverage result
cypress End to end testing folder
test/jest.setup.ts Jest setup before the test run
src/components Atomic design folder structure
src/definitions Constants
src/interface Interfaces
src/redux/store.ts Redux store setup
src/redux/modules Redux modules
src/redux/modules/index.ts Exporting combine reducer and middleware
src/redux/modules/{name}/index.ts Exporting all export file in this folder
src/redux/modules/{name}/{name}.consts.ts Redux Module Constants for reducer path and name
src/redux/modules/{name}/{name}.d.ts Redux Module interfaces
src/redux/modules/{name}/{name}.query.ts Redux Module RTK Query
src/redux/modules/{name}/{name}.slice.ts Redux Module RTK Slice / Reducer

Rules

Generals

  • The import local component/library should be with alias path (use @ReduxModules/Counter instead of ../src/Redux/Modules/Counter), here is available alias path:

    Alias Path Description
    @Atoms To access atoms directory which inside component
    @Molecules To access molecules directory inside component
    @Organisms To access organisms directory inside component
    @Definitions To access definitions directory inside src
    @Interfaces To access interfaces directory inside src
    @Pages To access pages directory
    @Redux To access redux directory
    @ReduxModules To access redux/modules directory
    @Static To access public/static directory
  • The imported library should be pyramid sorted and also grouped by:

    Order Number Import Area Description
    1 Import external library here
    2 Import local component here
    3 Import redux family here
    4 Import util/helper/etc function here
    5 Import Interface here

Components

  • Component should be writed in functional component
  • A function in functional component should be wrapped by useCallback to prevent a useless instantiation
  • A function has expensive calculation should be wrapped by useMemo to prevent a useless calculation
  • Functional component should be exported with React.memo to prevent a useless rendering
  • the interface should exist in a functional component to register incoming props.
  • Every component should have snapshot testing
  • Every new component shoud have property data-testid with prefix typescript validation, example: data-testid=button-login
Owner
kadkad
Currently learning about Web and Mobile apps development
kadkad
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO Next SEO is a plugin that makes managing your SEO easier in Next.js projects. Pull requests are very welcome. Also make sure to check out the

Gary Meehan 4.3k Jan 21, 2022
next-useragent parses browser user-agent strings for next.js

next-useragent ⚠️ Version 2 of this library will work only with Next.js 9. If you're using Next.js 6-8 you can use previous versions. ⚠️ next-useragen

Tsuyoshi Tokuda 269 Jan 6, 2022
Vulcan Next helps you build GraphQL-based applications with Next.js

Vulcan Next Vulcan Next helps you build GraphQL-based applications with Next.js. What's in the box? Vulcan Next provides: A production-grade Next.js +

null 6 Dec 29, 2021
Validate NEXT.js API Routes with joi

next-joi Validate NEXT.js API Routes with joi ?? Install Getting started How does it work? Working with NEXT.js API Routes NEXT.js & connect-like midd

Codecoolture 70 Jan 1, 2022
A plugin to generate terraform configuration for Nextjs 8 and 9

Terraform nextjs plugin A plugin to generate terraform configuration from nextjs pages The reason Nextjs supports serverless pages, where it creates f

Emanuele 47 Sep 30, 2021
The easiest way to translate your NextJs apps.

next-i18next The easiest way to translate your NextJs apps. If you are using next-i18next in production, please consider sponsoring the package with a

Isaac Hinman 2.9k Jan 13, 2022
nextjs + purgecss for smaller css bundles

next-purgecss Next.js + Purgecss = ?? Next.js makes it easy to create SSR and static React applications. Purgecss helps you remove unused CSS. Install

Luc Leray 129 Oct 7, 2021
Enable Fast Refresh for remote data in NextJS.

Enable Fast Refresh for remote data in NextJS.

Travis Arnold 35 Dec 21, 2021
A Minimal PokéDex App built using Next.js and React

ToxaDex A PokéDex App built using Next.js and React. Uses the PokéAPI directly to fetch data on all 898 Pokémon. Uses Static Site Generation for rende

Kushagra Shukla 2 Jan 15, 2022
Next plugin for .graphql and .gql files using graphql-tag

Next.js + Graphql Use Graphql files with Next.js Installation npm install next-plugin-graphql or yarn add next-plugin-graphql Usage Create a next.conf

Luis Alvarez D. 52 Nov 17, 2021
🛠 Next.js stateless session utility using signed and encrypted cookies to store data

next-iron-session ?? Next.js and Express (connect middleware) stateless session utility using signed and encrypted cookies to store data This Next.js,

Vincent Voyer 1.2k Jan 16, 2022
A beautiful and open source Landing Page Using Next JS

Taskia Landing Page Live Site Install Dependencies npm install Run App # Run in

Said Mounaim 2 Jan 6, 2022
Typed APIs using SWR and Next.js

Typed API with SWR Next.js plugin This Next.js plugin generates a TypeScript file to enhance the useSWR React Hook types so the return value is typed

Mohsen Azimi 1 Dec 29, 2021
React and Next.js site to display Discord server experiments and their rollouts

Discord Server Experiment Rollouts https://rollouts.advaith.io This is a site made with React and Next.js to display the current Discord server experi

Advaith 12 Dec 17, 2021
Cookie serializer and deserializer library for next.js

next-cookie Cookie serializer and deserializer library for next.js. Installation $ npm install next-cookie Usage HOCs The cookies are read and write

Tsuyoshi Tokuda 170 Jan 17, 2022
Simple promise-based session middleware for Next.js, micro, Express, and more

next-session Simple promise-based session middleware for Next.js. Also works in micro or Node.js HTTP Server, Express, and more. Project status: While

Hoang 229 Jan 14, 2022
The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2

next-connect The smol method routing and middleware for Next.js (also works in other frameworks). Powered by trouter. Features Compatible with Express

Hoang 903 Jan 15, 2022
Effortless deployment to AWS and GitHub Pages for Next.js apps 🚀

Next Deploy Effortless deployment to AWS and GitHub Pages for Next.js apps ?? Table of Contents Getting Started Features Background CLI Distributed De

Egor Philippov 39 Jan 3, 2022
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Paco 1.5k Jan 13, 2022