## NPM Packages / Plugins to keep in mind for Next development
### [MSW](https://mswjs.io/)
Used for mocking API requests (working with GraphQL).

### [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/)
Used for single component testing, see https://www.kyrelldixon.com/blog/setup-jest-and-react-testing-library-with-nextjs for integration with next.

### [XState](https://xstate.js.org/docs/)
Used to create [finate state machines](https://mastery.games/post/state-machines-in-react/#:~:text=The%20state%20machine%20is%20the,all%20allowed%20transitions%20between%20states) and prevent bugs.

### [Framer Motion](https://www.framer.com/motion/)
After some research, framer motion stays as the best overall css animation library for react, with full integration in next.
We can always consider adding different animation libraries if needed in the future, since they're generally fairly lightweight.

### [Lottie Files](https://airbnb.io/lottie/#/)
JSON Animation library by creators of AirBnB, used for easily importable animations

### [Nexti18](https://github.com/isaachinman/next-i18next)
Used for all translations, fully supported by next and used by me multiple times.

### [Next SEO](https://github.com/garmeeh/next-seo)
Used for easy SEO in next, we can set default SEO and be sure we imported all necessary tags for all pages.

### [Unified](https://unifiedjs.com/)
Only useful if we plan on having a blog/pages system based on MD files.

## Hosting for Next
https://blog.charlesloubao.com/best-platforms-to-deploy-a-nextjs-project/
https://kontent.ai/blog/comparison-of-jamstack-hosting-platforms-for-next-js/
https://snipcart.com/blog/vercel-vs-netlify
https://bejamas.io/compare/netlify-vs-vercel/
### [Vercel](https://vercel.com/)
**Pros**
- Owned by next js owners, so always up to date
- Data regarding page speed / bottlenecks
- Serverless function support with /api endpoints
- Caching for serverless functions
- Direct CLI support without external tools
- CLI is a little clearer
- Full support for Edge Functions (might worth take a look at for speed https://vercel.com/docs/concepts/functions/edge-functions)
- AB test with edge functions

### [Netlify](https://www.netlify.com/)
**Pros**
- Built in AB Testing
- Build in Auth system (if we ever need it)
- Serverless form handling (maybe useful for future landing pages?)
- Server analytics such as pageviews, unique visitors, bandwidth used, top sources & pages, and resources not found
- Serverless function support with /api endpoints
- Direct CLI support without external tools

## Package manager
Between **yarn** and **npm** yarn is the clear favourite for speed and security, while npm is better just for user friendliness (but I want to learn yarn so it does not matter)