🔮 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 Auth.js. gives you the ability to login using Google and other social logins.
• 🔎 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.
• 🆘 Sentry: exception collection and analysis.
• 💅 styleguide: via Storybook.

💾 Install

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

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!

Deploy on Vercel

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.

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

📜 License

MIT

(The format is based on Make a README)