dwarvesf / nextjs-boilerplate

Opinionated React template for building web applications at scale

Dwarves NextJS Boilerplate

An opinionated production-ready frontend boilerplate built on top of NextJS, shipped with TypeScript, SWR, TailwindCSS, Jest, testing-library, Cypress, and Storybook.

Quick Start

git clone --depth=1 [email protected]:dwarvesf/nextjs-boilerplate.git my-project-name
cd my-project-name
pnpm install

Then, you can run locally in development mode with live reload:

pnpm dev

Open http://localhost:3000 with your favorite browser to see your project.

Deployment

Environment	URL
Prod	https://df-nextjs-boilerplate.netlify.app/

Resources

Name	Description	Link
UI Docs	Storybook	https://df-nextjs-boilerplate-storybook.netlify.app/
API Docs	Swagger	https://demo-api.dwarvesf.com/swagger/index.html
API Source	Go	https://github.com/dwarvesf/go-api.git

Documentation

• Getting started
• Tech ecosystem
• Code style
• Writing tests
• Editor
• Deployment

nextjs-boilerplate's Issues

inline-react-svg not working on icons properly?

Describe the bug

How does the program work in its current state? A clear and concise description of what you expected to happen.

After installing an app and going to Dahsboard with demo account, I see lots of errors similar to this one:

Warning: Invalid DOM property fill-rule. Did you mean fillRule?

Steps to reproduce

Install and start app with:

git clone --depth=1 [email protected]:dwarvesf/nextjs-boilerplate.git my-project-name
cd my-project-name
yarn install
yarn dev

Open http://localhost:3000/ and login with demo account

Expected behaviour

Errors should not be present, fillRule should be generated instead of fill-rule.

Environment

You may write here the specifications like the version of the project, operating system, or hardware if applicable.

Desktop (please complete the following information):

• MacOS 12.5.1
• Chrome

I tried to debug it and inside that plugin found transformSvg which does that

// converts
// <svg stroke-width="5">
// to
// <svg strokeWidth="5">
// don't convert any custom data-* or aria-* attributes just wrap in quotes

but it's not triggered
Looking further I found this condition, that supposedly executes that transform:

node.callee.name === 'require'

I still debugging it, but seems it only works on svg import, and not by passing content with:

babel.transform(content

Maybe something had changed, or was this error present before?

Replace auth-context by next-auth

https://next-auth.js.org/

Upgrade packages that have Major changes

Describe the bug

Some packages have major changes from our latest version. Let's upgrade them.

Steps to reproduce

1. Run cmd to check
   pnpm outdated -r
2. Upgrade packages have latest in red

Expected behaviour

All packages are updated to latest version.

Screenshots

Upgrade Deprecated packages

Describe the bug

There are some deprecated packages in this repo. Let's upgrade or replace by alternative packages.

Steps to reproduce

1. Run check cmd
   pnpm outdated -r
2. Replace packages with Latest is Deprecated.

Expected behaviour

All deprecated packages are replaced.