

Master JavaScript for Your Next Big Interview
Comprehensive Content for learning Web Dev - From Basics to Advanced
Use this coupon 'PIYUSHAM19615' to get extra 10% discount on the course
Start LearningHow to Inline Critical CSS in Next.js 12 & Next.js 15
A concise guide to using the new inline CSS feature in Next.js 15, comparing it with Next.js 12, and exploring its benefits and limitations for performance
Introduction
When transitioning from Next.js 12 to Next.js 13, we were introduced to the new App Router, which supports server components. However, during the migration, one critical feature was noticeably missing: the option to inline critical CSS. In Next.js 12, we could easily inline critical CSS to improve performance, as shown in the example below
module.exports = {
experimental: {
optimizeCss: true,
},
};
The Performance Impact of Losing Critical CSS Inlining
Without the ability to inline critical CSS in Next.js 13, metrics like FCP (First Contentful Paint) and LCP (Largest Contentful Paint) increased significantly, resulting in lower overall page performance. Although it’s possible to inline critical CSS using various workarounds, you cannot eliminate the extra network requests introduced by link tags.
This issue was widely discussed in various forums, as many developers who migrated to Next.js 13 experienced notable performance drops. Numerous community members raised concerns and looked for official solutions.
The Introduction of the inlineCss Feature in Next.js 15
After considerable feedback and criticism, Next.js 15 was released with an experimental feature to inline CSS. This update addresses the problem of high LCP and FCP by allowing you to eliminate additional network requests and significantly improve page load performance.
Github Discussion - https://github.com/vercel/next.js/discussions/59989
How to Use the Inline CSS Feature
To use the inline CSS feature, add the following configuration to your next.config.js
file.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
inlineCss: true,
},
}
export default nextConfig
Benefits of Using Inline CSS
- Improved Page Load Performance
Inlining CSS reduces the time to render critical elements, improving key metrics like FCP and LCP.
- Reduced LCP and FCP
By removing external CSS requests, the browser can paint content faster.
- Better Performance on Slow Connections
With fewer network requests, pages load faster, even on slower networks.
When Not to Use Inline CSS
- Large CSS Bundle Sizes
Inlining large CSS bundles can bloat the HTML, increasing TTFB (Time to First Byte).
- Dynamic CSS-Heavy Sites
If your site relies on a lot of dynamic or frequently updated styles, inlining may cause redundant styling and unnecessarily large HTML files.
Visual Comparison (With Images)
Below, we will include images to illustrate the difference in how CSS was previously loaded in Next.js 15 initial version (relying on external stylesheets) and how it’s now handled in Next.js 15 with the inline CSS feature. These visuals will help you understand the performance improvements and the reduction in network requests.
Next JS Article - https://nextjs.org/docs/app/api-reference/config/next-config-js/inlineCss
Read More

Docker Demystified: Understanding Containers, Images, and Architecture
Learn the basics of Docker containers and images. Explore the Docker architecture and discover how it simplifies application development and deployment.

Boost Hearing & Focus with Neuro Quiet - Natural & Safe Supplement
Discover how Neuro Quiet enhances hearing health, detoxifies toxins, and improves cognitive clarity with its natural, safe ingredients. Guaranteed results or your money back

Java Burn: Natural Weight Loss Supplement with Holistic Benefits [55]
Explore the unique benefits of Java Burn, an all-natural supplement that boosts metabolism for long-term weight loss, enhances sleep quality, and reduces stress.

Niacinamide: Benefits and Uses in Skin Care
Learn how niacinamide, a multitasking vitamin B3, transforms your skincare routine by improving hydration, reducing discoloration, and fighting signs of aging.