🔮 Next.js, ✨ ALL THE THINGS ✨ edition

NOTE: still under active development and I'm not currently providing backwards compatibility until things stabilize.

📯 Description

This template includes scripts and configuration used by Next.js but with an opinionated set of bells 🔔 and whistles 😗.

⚡ Features

• ♿ accessibility (a11y) analyzer: via axe. in the bottom corner of CRA you’ll see a menu that will give you a list of items your site is violating in terms of a11y.
• 🔐 authentication: via Auth0. gives you the ability to login using Google/Facebook.
• 🔎 bundle size analyzer: via source-map-explorer. do yarn analyze after creating a build.
• 🛠️ component Libary (UI): via Material-UI.
• 🔐 CSP nonce
• 📚 documentation: adds some standard and GitHub-specific Markdown files using best practices. files include:
  • changelog
  • code of conduct
  • code owners (GitHub-specific)
  • contributing: based off of Atom’s.
  • contributors
  • issue template (GitHub-specific)
  • license
  • pull request template (GitHub-specific)
  • readme
  • support (GitHub-specific)
  • alex for more inclusive, equitable docs.
• 🚫 error boundary: adds a top-level one to the app. (see doc).
• ❌ error pages: 401, 404, 500.
• 🆘 error reporting: listens to window.onerror and reports JS errors to the server for debugging.
• 🧑‍🔬 experiments framework: allows you to add experiments quickly via a React component and hooks.
• 🧑‍🚀 GraphQL/Apollo: adds GraphQL and Apollo.
  • for GraphQL adds GraphQL code gen.
• 🫶 humans.txt / robots.txt: adds stubs of these files.
• ✅ health checks: runs a client health check every 5 minutes to see if the client is still valid.
• 🌐 i18n: via react-intl and extraction tools.
• 🗜️ imports: absolute imports are turned on.
• 💽 ORM: via prisma.
• 📏 perf indicator: in the bottom corner of the app, it will display render times. (also has web vitals built in.)
• ✨ Prettier: adds linting upon commit. also sorts imports via prettier-plugin-import-sort.
• 🪩 React Spring: for great animation using a React hook.
• 🆘 Sentry: exception collection and analysis.
• 💅 styleguide: via Storybook.

💾 Install

yarn create next-app --typescript --example https://github.com/mimecuvalo/all-the-things

or, Deploy to Vercel

Then, to run your newly created server locally:

yarn dev

Open http://localhost:3000 with your browser to see the result.

👉 See main readme.md for more details on running! 👈

📜 License

MIT

(The format is based on Make a README)