> Canonical URL: https://codingcat.dev/post/nextjs-11-features
# Next.js 11 Features
✏️ Blog PostJuly 14, 2021
# Next.js 11 Features
[Alex Patterson](/author/alex-patterson)✏️ Visual Architecture Diagram
## how this post connects together.
Follow AJ from first principles to production-ready architecture.
Let’s build it!✏️ Visual Diagram: Next.js 11 Features✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Next.js 11 Features: start with Next.js 11 Features, implement Hands-On Implementation, and ship to production.AAA Contrast Verified
> Please take note the above video is not codingcat.dev's. I thought it was important to see the announcement in its full context.
In research for my next (or should I say Next.js) series of courses I wanted to dive back into Next.js 11's new features. The items that really blew me away were best summarized by one of my favorite guest on our podcast Swyx in this [tweet](https://twitter.com/swyx/status/1404845602463043590).
- Collaborative preview edits (Next.js Live)
- "Conformance" perf guidelines
- `` size detection
- `` loading strategy
- Automatic Font optimization
## Collaborative preview edits
This is an interesting one to call a Next.js feature, one could argue that it is a Vercel feature but I am really splitting hairs here because the server that you need is in Next.js but the account you most likely will use is Vercel in the near future. You have most likely seen this same type of collaboration if you have worked on [Figma](https://www.figma.com/) or [Miro](https://miro.com/). This tends to stay in the design phase of how we work at OST in the "Design. Architect. Build. Run." experience. It is rarely something that you are seeing collaborated with on a live site that you are running code behind. I think this will bring together the Design, Architect, and Build phases of the project.
## Conformance
> Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility.
Basically this is the thing every developer wants without having to work so hard to achieve it. Next.js 11 will support ESLint directly so it will find any framework-specific issues during development. I am excited about the Core Web Vitals but I can't wait to see what the team has in store for Security and A11y!
Make sure to checkout Google's plans for project [Aurora](https://web.dev/introducing-aurora/) and specifically their blog on [Conformance in Next.js](https://web.dev/conformance/#conformance-in-next.js).
## Image Size Detection
For those of you not using the already built in feature for Image Providers like I talk about on [Media Jams](https://mediajams.dev/post/Using-Cloud-Providers-with-nextimage), this feature is amazing! It will allow you to import your local images and it will automagically determine width and height.
Copied! 🐾
```
import Image from 'next/image';
import cat from '../public/cat.png';
export default function Home() {
return (
// When importing the image as the source, you
// don't need to define `width` and `height`.
);
}
```
Something to also note is the cool placeholders you can add now as well using `placeholder="blur"`. You can read more about Image Imports in [Next.js Docs](https://nextjs.org/docs/basic-features/image-optimization#image-imports)
## Script Loading Strategy
This new Script Optimization is pretty bananas just like Gwen always said!
via GIPHY
If you are a developer you 100% have run into that analytics package or ad requirement that you must use external scripts. They are typically a performance nightmare and often go unseen until your app is out in the public view. Now you can use the new `next/script` tag and define the appropriate `strategy`. There are three strategies involved and broken down very easily
- `beforeInteractive`: For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.
- `afterInteractive (default)`: For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.
- `lazyOnload` For scripts that can wait to load during idle time, such as chat support and social media widgets.
You can read all about it in the Next.js 11 blog post on [Script Optimization](https://nextjs.org/blog/next-11#script-optimization) or in the [Next.js Docs](https://nextjs.org/docs/basic-features/script).
## Automatic Font Optimization
Okay technically this one was added in [Next.js 10.2](https://nextjs.org/blog/next-10-2#automatic-webfont-optimization) but it was talked about in the conference and I for sure didn't know about it! There are several methods to include web font loading into your system. You can create them at build time and reference, have TailwindCSS do it for you like we do, or add the link manually. It will now look like the below code.
Copied! 🐾
```
// Before
- // After @font-face{font-family:'Inter';font-style:normal..... ``` The great part about this optimization especially in your static sites during build time Next.js optimizes and inlines font CSS at build time which will eliminate an extra round trip to fetch font declarations. This should also give you a better FCP and LCP. Checkout the [Next.js Docs](https://nextjs.org/docs/basic-features/font-optimization) for more information on Font Optimization. ## Resources, Links & Official Documentation [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides
## Related CodingCat.dev Tutorials & Podcast Episodes
- [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features): We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12.
- [**Next.js Deployment Adapters: A bright future for Next.js on Google Cloud in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2026-03-nextjs-adapters): Hands-on web engineering breakdown of "Next.js Deployment Adapters: A bright future for Next.js on Google Cloud" (2026-03-26). Learn how to integrate Firebase, ...
- [**Reviewing Next.js 11 features with Tim Neutkens**](/podcast/1-36-reviewing-nextjs-features-with-tim-neutkens): We sit down with Tim to talk about how he got started with Next.js and what things are upcoming in Next.js 11.
## Frequently Asked Questions (FAQ)
### What are the main takeaways from Next.js 11 Features?
Learning about all of the amazing Next.js 11 features. Next.js 11 Features explores practical patterns for Next.js in modern software engineering. Throughout this post, Alex Patterson breaks down real-world implementation details for Next.js so developers can apply these patterns directly in production.
### How do you implement Next.js best practices in production?
When adopting Next.js in a production stack, start by validating your configuration against the [**Next.js Official Documentation**](https://nextjs.org/docs) (App Router, Server Actions, and rendering architecture guides). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
### Where can I watch the full Next.js 11 Features walkthrough and find related code resources?
You can explore the complete write-up and code examples right here on CodingCat.dev, and subscribe to the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly video tutorials. For a deeper dive into Next.js, check out our related guide: [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features).
## recent blog posts.
[All Blog Posts→](/blog)[](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai)
### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)
Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls.
[Alex Patterson](/author/alex-patterson)[](/post/php2shell-cve-2026-109618-ai-php-security-scramble)October 22, 2026[AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai)
### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble)
Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers.
[Alex Patterson](/author/alex-patterson)