[Snyk] Security upgrade next from 10.2.0 to 12.0.8

[ayusuf-mq]

Snyk has created this PR to fix 1 vulnerabilities in the yarn dependencies of this project.

Snyk changed the following file(s):

• package.json
• yarn.lock

Note for zero-installs users

If you are using the Yarn feature zero-installs that was introduced in Yarn V2, note that this PR does not update the .yarn/cache/ directory meaning this code cannot be pulled and immediately developed on as one would expect for a zero-install project - you will need to run yarn to update the contents of the ./yarn/cache directory.
If you are not using zero-install you can ignore this as your flow should likely be unchanged.

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Infinite loop SNYK-JS-BNJS-15274301	620

Breaking Change Risk

Notice: This assessment is enhanced by AI.

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Learn about vulnerability in an interactive lesson of Snyk Learn.

[ayusuf-mq]

This is a major version upgrade from Next.js 10 to 12, introducing significant breaking changes, new features, and performance improvements. Key changes include a new Rust-based compiler (SWC), the removal of Webpack 4 support, and an increased minimum Node.js version.

Highlights & Breaking Changes

Next.js 11:

• Webpack 5 by Default: Webpack 5 became the default for all applications, offering improved performance and build times.
• React 17.0.2 Minimum: The minimum React version was updated, enabling the new JSX Transform without needing to import React in every file.
• next/image Improvements: The unsized property was removed, and automatic size detection was added for static local images.
• Legacy Feature Removals: Several long-deprecated features were removed, such as props.url in page components and old options for next/dynamic.

Next.js 12:

• Node.js Version Requirement: The minimum required Node.js version was raised to 12.22.0 to support native ES modules.
• Rust Compiler (SWC): Next.js replaced Babel with a new Rust-based compiler, SWC, resulting in significantly faster builds (~5x) and Fast Refresh (~3x). It is backward-compatible; projects with a custom .babelrc will automatically opt-out and continue using Babel.
• Webpack 4 Support Removed: Support for Webpack 4 has been completely removed.
• next/image Wrapper Change: The component now wraps the <img> tag in a <span> instead of a <div>. This can break CSS selectors that target the wrapper (e.g., .container > div).
• Stricter styled-jsx Parsing: The new CSS parser is stricter and will throw errors on invalid CSS that might have been previously ignored.

Recommendation:
This upgrade is high-risk and requires careful migration. Developers must:

1. Ensure the deployment environment uses Node.js 12.22.0 or newer.
2. Migrate any custom Webpack 4 configurations to Webpack 5.
3. Review CSS styles targeting next/image components to account for the div to span wrapper change.
4. Validate that any styled-jsx usage conforms to stricter parsing rules.

Source: Next.js 11 Upgrade Guide, Next.js 12 Upgrade Guide

Notice 🤖: This content was augmented using artificial intelligence. AI-generated content may contain errors and should be reviewed for accuracy before use.