DEV Community

Cover image for Whats New in Next.js 13.5
Kumar Kalyan
Kumar Kalyan

Posted on

Whats New in Next.js 13.5

TLDR βœ‚οΈ

Next.js 13.5 is here! πŸŽ‰ It's the latest version of Next.js. In this article, we'll learn about:

What is Next.js ?

Next.js is a React-based production-level framework used for building full-stack React applications. It has over 1,258,087 weekly npm downloads. Next.js is an open-source project by the Vercel team that was released on October 25, 2016. Its latest version is 13.5.1. Over the years, Next.js has gained a huge level of popularity in the React ecosystem and is the first love for React developers. πŸš€

As the project is open source, it is growing rapidly with 112K stars, 24.7K forks, 1.4K watches, 1.8 million used, and 2885 contributors on GitHub. πŸŽ‰

Some of the top tech giants using Next.js are Meta, Uber, Auth0, and Tripadvisor. πŸ’Ž

Key features making Next.js a fullstack framework

  • Built-in optimization for images, fonts, layout scripts, application scripts, static, dynamic, and file-based metadata, static assets, lazy loading πŸ¦₯, speed analytics πŸ’¨, web vitals πŸ“Š, etc.
  • Middlewares in Next.js help in executing chunks of code before a request is fulfilled. In Next.js, you can use simple middlewares, path middlewares using matcher config, and conditional statements. Using the NextResponse API, you can redirect and rewrite URLs πŸ”„, request headers from the client, set response cookies and headers πŸͺ, and also set up advanced middleware flags using Next.js βš™οΈ.
  • Client and server-side rendering in Next.js allows you to render the UI in both the client and the server using client and server components πŸ–₯️.
  • CSS support for styling your Next.js application using global CSS, CSS modules, SASS, Tailwind CSS, and CSS within JS 🎨.
  • Advanced routing and nested layouts in Next.js allow you to define advanced routing and nested layouts using the file system πŸ—ΊοΈ.
  • Node.js & Edge Runtime in Next.js allows you to build fast and scalable web applications using serverless functions πŸš€. This helps in shipping dynamic and personalized content for the users 🎯
  • Data fetching in Next.js helps execute asynchronous fetch functions in both the client and server πŸ’», handling form submissions and data mutations πŸ“

What's new in Next.js 13.5

  • 22% faster local server startup πŸš€
  • 29% faster HMR (Fast Refresh) πŸ’¨
  • 40% less memory usage 🧠
  • Optimized expensive file system operations πŸ“
  • Auto Configuration for Larger Icon Libraries 🎨
  • Optimized Package Imports πŸ“¦
  • next/image Improvements πŸ–ΌοΈ
  • Improved documentation for forms and mutations, Client and Server components, Content Security Policy and Nonces, Caching and Revalidating πŸ“
  • useParams and useSearchParams can now be used in the Pages Router πŸ—ΊοΈ

Help me grow on Dev

If you like my article and found it helpful, make sure to save it, follow my dev blog, and share it with your friends and colleagues. And comment down below on how you plan to use the new Next.js 13.5! πŸ’Ύ πŸ“° πŸ‘₯ πŸ’¬. Article Reference Next JS Blog

Top comments (0)