Next Typescript Boilerplate

This is the Next.js application for Web Frontend Template

Lighthouse

uTests Coverage Status

| Statements | Branches | Functions | Lines | | --------------------------- | ----------------------- | ------------------------- | ----------------- | | | | | |

What chore library inside this repository?

- jest & testing-library
- bootstrap 5
- react-query
- nextjs@latest
- next-pwa
- axios
- dayjs

How to Install

Prerequisite

node ^v14.17.0
npm ^6.14.13

run script

npx tomibudis/codelabs-next-web {appName}

When init project successfully. follow the following command script to start

Development

Run locally as dev mode

• npm run install
• npm run dev
• open http://localhost:3000

Build Mode (production)

• npm run install
• npm run build
• npm run start
• open http://localhost:3000

uTest

• npm run test

build coverage badge

• npm run test:coverage

Folder Structure

src
├── components
│   └── index.ts
├── constants
│   └── index.ts
├── hooks
│   ├── mutations
│   └── queries
│       └── use-todo.ts
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── _offline.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── styles
│   ├── config.scss
│   └── globals.scss
├── types
├── utils
│   ├── axios.ts
│   ├── date.ts
│   └── test-utils.tsx
└── views
    └── homepage
        ├── __test__
        │   ├── __snapshots__
        │   │   └── Homepage.test.tsx.snap
        │   └── homepage.test.tsx
        ├── homepage.tsx
        └── index.ts

Commit

All commit messages should conform to the conventional commit format and should use following syntax: type(scope): subject. While the type is mandatory, the scope is optional. Examples:

docs: add README.md

fix(Header): fix padding issue

feat: create Home view

Main types are fix and feat, however it is possible to also use:

• chore
• docs
• style
• refactor
• perf
• test

Additional information can be found here

Generate lighthouse

1. build application with npm run build
2. run app locally npm run start
3. run npx lighthouse-badges --urls http://localhost:3000 -o lighthouse