next-must-have-libraries
v1.0.14
Published
A starter professional React using Nextjs
Downloads
48
Maintainers
Keywords
Readme
NEXT-MHL
A Professional Starter React Nextjs with Must-Have Libraries (MHL)
Opinionated project includes:
- Initial Next.js project - bootstrapped with
create-next-app
. - NextJS v12.x
- React & React DOM v17
- Type Checker - TypeScript v4.x
- Storybook v6.x (Webpack@5 support)
- MSW storybook-addon
- Lint - ESlint & Eslint-config-next
- Mocking - Mock Service Worker
- CSS-in-JS Modules — Styled Components
- Unit Testing - Jest + react-testing-library
- E2E testing - Cypress
- Format - Prettier
- Git hooks - Husky
- Useful utilities - analyzer Bundle, react-uuid (create unique Id)
- Generate templates
next-password-protect
check_app.tsx
to enable- Sharp library - For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended.
If you want to generate HTML in the client browser check CRA-MHL
Run Scripts
Inside the project directory run using npm
or yarn
:
dev
- runs the app in the development mode. Open http://localhost:3000 to view it in the browser.build
- builds the app for production to thebuild
folder.start
- Runs the built app in production mode. You can add port:"start": "next start -p 8081"
.export
- create an export static folder, defaultout
folder.lint
- ESlint configured for Next. Use.eslintrc.json
to setup &.eslintignore
to ignore files.storybook
- To run your Storybook. Open http://localhost:6006/ to view it in the browser.build-storybook
- build Storybook - create static Storybook project.clean-storybook
- clean static Storybook folder.test
- unit testing with Jest & react-testing-library.test:watch
- watch our jest tests.test:ci
- unit testing with Jest & react-testing-library using the ci flag.format
- will format your code prettier using opinionated settings inside.prettierrc
file. Use.prettierignore
to ignore files.analyze
- source-map-explorer to Analyzer Bundle.clean-next
- delete.next
folder.analyze
- source-map-explorer to Analyzer Bundle.cypress:open
- create a cypress E2E directory with some examples.cypress:run
- run the E2E tests and record video.cypress:clean
- deletecypress
folder.prepare
- Install husky.isready
- run format, lint, test and build production, lastly run analyze.clean-next
- clean next directory.svg
- run to auto-generate TypeScript React components of SVGs from the /src/components/Svg/raw directory, outputted to the /src/components/Svg directory.
Usage
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app my-app -e https://github.com/EliEladElrom/next-must-have-libraries
Or;
yarn create next-app my-app -e https://github.com/EliEladElrom/next-must-have-libraries
Run
yarn dev
# or
npm run dev
Entry point pages/index.tsx
.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.tsx
.
The pages/api
directory mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Configure Storybook Templates
generate-react-cli help speed up productivity in React projects, feel free to tweak rules inside the config file generate-react-cli.json
to match your needs.
Example;
npx generate-react-cli component Header --type=story
Or use the complex story;
npx generate-react-cli component Header --type=complex-story
Will result with the following components;
- components/Header/Header.tsx
- components/Header/Header.stories.tsx
- components/Header/index.ts
Eslint configurations
Lint set according to Airbnb style guide — as part of their style guide. Feel free to tweak .eslintrc
.
Format configurations
Prettier is set using my opinionated settings, feel free to tweak prettier rules inside config file .prettierrc
to match your code style.
Analyzing the Bundle Size
Use source-map-explorer (yarn add --dev source-map-explorer);
$ yarn analyze
Environment Variables
The following environment variables .env
are in use throughout the project.
See .env.sample
for examples:
| Name | Description |
| ------------------------------------------------------ | ----------------------------------------------- |
| PUBLIC_ENVIRONMENT
| Environment |
| NEXT_PUBLIC_GIT_SHA
| Git Commit SHA |
| NEXT_PUBLIC_PUBLIC_VERSION
| Should be Based on package.json
version tag |
| NEXT_PUBLIC_IMAGE_TAG
| Docker SHA - if using one |
| NEXT_PUBLIC_GIT_COMMIT_DATE
| Latest commit date |
If you can use help with your React project or have a burning question, or an issue in your project that needs help with, I invite you to hire me as your Coach. My strategy is 100% results-oriented. If you want to sample how I work 1-on-1, let’s schedule a one-time deep dive Consultation. Additionally, I will tutor you in react, javascript, typescript, mongodb, node, d3.
Where to go from here?
- Take the interactive d3 and React Course
- View the article on Medium
- Visit my site EliElrom.com
- Learning React?
If you like this library, don't be shy to star it!