This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/[lon].tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Conventional commitlinting is applied with Commitizen and others tools in this project.
Used packages:
- Commitizen https://commitizen-tools.github.io/commitizen/
- Commitlint https://github.com/conventional-changelog/commitlint
- Husky hooks https://github.com/conventional-changelog/commitlint
- Lint-staged https://github.com/okonet/lint-staged
Read the documentation
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.jsTo lint commits before they are created you can use Husky's commit-msg hook:
# Install Husky v6
npm install husky --save-dev
# or
yarn add husky --dev
# Activate hooks
npx husky install
# or
yarn husky installAdd hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'for my commit editing, I chose nano.
git config --global core.editor nanoNOTE: All these installation process will probably be outdated based on the compatibility between packages
For all possible type, scope and subject, go to conventional commit
# type, subject
fix: My awesome commit
# Long description
Some long description (100 chars max)
# For change log (not mandatory)
BREAKING CHANGE: `extends` key in config file is now used for extending other config files
Reviewed-by: Some colleague
Refs: #123 (tickets)
Closes: #123 (tickets)TODO
- Semantic release https://github.com/semantic-release/git
- Useful link to integrate styled components in Next. As well font flashing issue. See
- styled components integration in Next.js
- Theme in next https://www.jonathan-harrell.com/blog/system-based-theming-with-styled-components/
- Next fonts API reference https://nextjs.org/docs/api-reference/next/font
- Google web font generator https://gwfh.mranftl.com/fonts
- Load fonts in next See
- React grid system https://www.npmjs.com/package/react-grid-system
- React grid system documentation https://sealninja.github.io/react-grid-system/
- React grid layout (top nocth version for industry) Github site
- react-grid-layout example Code sandbox 1
- react-grid-layout example - Dashboard Code sandbox dashboard
Install Webpack 5 and plugins, edit your storybook config, typescript and other needs.
TODO: Storybook config exposes a Vite entry, replace webpack with Vite.
- Approach for writing stories for Next.js https://dev-yakuza.posstree.com/en/react/nextjs/storybook/start/
- Storybook with TypScript (webpack & vite) https://stackoverflow.com/questions/66444895/how-to-resolve-aliases-in-storybook
- Decorators (v5 then v6) storybookjs/storybook#8531
- next/image decorator https://dev.to/jonasmerlin/how-to-use-the-next-js-image-component-in-storybook-1415
- Mocks with MSW
- Codepen for gradients
- The Secret of Great Gradient
- Sky-inspired Weather App Concept
- Using Vue.js To Create An Interactive Weather Dashboard With APIs
- Fucking wicked tool online to extract image colors https://10015.io/tools/image-color-extractor
- NPM package to do the trick of color image extraction https://www.npmjs.com/package/extract-colors
- Maybe more affordable https://dev.to/producthackers/creating-a-color-palette-with-javascript-44ip
- And the key solution https://github.com/Namide/extract-colors
Due to jest rules in next/jest, all moduleNameMapperShit are not taken into account, so you have to do this work around:
vercel/next.js#35634 (comment)
Loading SVGs in Next and React 18
- complicated: https://codesandbox.io/s/react-dynamic-svg-import-ts-forked-q7r0vk?file=/src/App.tsx
- simple: https://ryanhutzley.medium.com/dynamic-svg-imports-in-create-react-app-d6d411f6d6c6
Google Maps API key: AIzaSyAq65YInKMUuOTLhrmCWz7ZoNhLmCfJxXY
In this project, the Google example approach has been chosen,
install npm i @googlemaps/react-wrapper
and see: https://developers.google.com/maps/documentation/javascript/react-map#react-wrapper
install npm i @googlemaps/js-api-loader
and see: 3 gotchas of Google Maps API when used with Next.js and eslint
See documentation: Field Descriptions
Conventions to manage issues & enhancements to implement: on Github
Simple continuous integration with CircleCI: https://github.com/whoisryosuke/next-styled-storybook-starter