Next.js June 2023 Update: Improving Performance, Stability, and App Router

Discover the latest Next.js June 2023 update, focusing on local development performance, new React features, and the Next.js App Router. Learn how the team is addressing community feedback, improving developer education, and growing the third-party ecosystem

· 2 min read
Nextjs logo
Next.js June 2023 Update

Next.js has recently released its June 2023 update, which focuses on local development performance, new React features, and the Next.js App Router. In this article, we'll discuss the key highlights from the update, community feedback, and the existing problems that the Next.js team is addressing. nextjs.org

Local Development Performance

Next.js is working on improving the performance of its existing webpack architecture. For certain applications, especially those refreshing thousands of modules, developers have reported flakiness with local development and Fast Refresh. To address this issue, Next.js recently added pre-configured settings (modularizeImports) to handle large icon libraries that might accidentally force thousands of modules to reload on every request.

New React Features

Next.js is dedicated to providing more education around new React features available in the Next.js App Router, such as Server Components and conventions like the "use client" directive. These features are not exclusive to Next.js but are part of the larger React ecosystem. The team, partners at Meta, and independent contributors are working together to provide more education and resources on these topics.

Next.js App Router Update

The App Router represents a new foundation for the future of Next.js, and the team is focusing on improving the experience by addressing performance, stability, and developer education. They're also working on growing the third-party ecosystem, such as Panda CSS, a CSS-in-JS library from the makers of Chakra UI, announcing support for React Server Components.

Turbopack: A New Bundling Solution

Next.js is working on replacing webpack with Turbopack, a low-level incremental computation engine that enables caching down to the level of individual functions. This will lead to sustained improvements in Fast Refresh speed as applications grow in size. Turbopack is currently available in beta (next dev --turbo).

Addressing Community Feedback and Existing Problems

The Next.js June 2023 update has been well-received by the community, and the team recognizes the importance of addressing feedback and existing problems. The App Router, which is a core part of the update, has been the focus of many discussions, with developers providing valuable feedback and reporting bugs. As a result, the Next.js team has made it their top priority to improve the App Router experience.

Developers have reported issues with local development performance, particularly when working with large applications that require refreshing thousands of modules. This has led to flakiness with local development and Fast Refresh. To tackle this problem, Next.js has introduced pre-configured settings (modularizeImports) to handle large icon libraries, which could accidentally force thousands of modules to reload on every request.

Another challenge faced by the community is the lack of comprehensive education and documentation on the new features of the App Router and modern React. To address this, the Next.js team has been rewriting the Next.js documentation from scratch and is working on providing more learning resources and real-world codebase examples.

Conclusion

the Next.js team is dedicated to addressing the community's feedback and existing problems. They are actively working on improving the App Router experience, local development performance, and providing more comprehensive documentation and educational resources. The team is committed to making Next.js a more delightful and productive framework for developers and their teams. As always, they appreciate feedback from the community and encourage users to open issues or start discussions on any challenges they face while using Next.js.