Search [Great Move to the World] on WeChat, and I will share with you the front-end industry trends, learning paths, etc. as soon as possible.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
Next.js is a JavaScript framework built on top of React, a popular library for building user interfaces. This means you can use React to build your app, and Next.js provides additional tools and features to make the process easier.
One of the main benefits of Next.js is that it enables server-side rendering. This means that the server can generate the HTML for the page and send it to the client, rather than the client generating the HTML using JavaScript. This can improve your application’s performance and SEO.
Next.js also includes many other features that are useful when building and deploying web applications. For example, it features automatic code splitting, which means your app only loads the code it needs for the current page, rather than all of it at once. This can improve application performance. Next.js also comes with a built-in development server and a toolchain for deploying applications to production.
Now that you know a little more about Next.js, let’s explore what the Next.js 13 release brings us.
What’s new in Next.js 13?
Next.js 13 is the first comprehensive attempt to integrate React’s two identities – UI library and architecture. So, what new features does it have?
1. App/directory for file routing
One of the best features of Next.js is file-based routing. Instead of dealing with complex routing setups in programs like react-router, you can use a directory project structure to specify routes. You can create a new path by adding an entry point to the directory page.
Next.js 13 includes updated file routing and new directories. The optional application directory introduces a new layout structure as well as some new features and improvements.
The directory structure has changed slightly due to the new routing mechanism. Each route in the route has a dedicated directory with a page.js file, which serves as the content entry point for Next.js 13.
Differences in routing
Thanks to the new structure, we can now include additional files in each path directory. Also, a routed page.js, eg.
- layout.js – A path and its subpath system.
- loading.js – A React-based instant loading system.
The underlying Suspense and error.js, display a component if the main component fails to load. Since each path now has its own directory, we can place source files side-by-side in the path directory.
2.React server component
The most exciting thing about the new version of Next.js is the extended support for React server components. Server components allow us to run and render React components on the server side for faster transfers, smaller JavaScript bundles, and cheaper client-side rendering.
Additionally, depending on the type of data needed to generate routes, server components are automatically cached at build time or runtime for additional performance benefits.
Combining server and client components, you can use server components for fast-loading, non-interactive parts of your program, and client components for interactive, browser API, and other features.
When building client components for your Next.js application, you can mark them as client components with the ‘use client’; directive at the top of the file. However, if you use any third-party packages, you may need to create a client wrapper.
3. Asynchronous components and data acquisition
Additionally, Next.js 13 introduces async components, an entirely new approach to data collection for server-rendered components. When using async components, we can use Promises of async & amp; await to render the system.
When requesting data from an external service or API and returning a Promise, we declare the component as synchronous, and wait for the response.
asyncfuncgetData() {
constres = awaitfetch('https://api.shamim.com/...').
return res.json().
}
export default async function About() {
constname = await getData();
return '...'.
}
The following example demonstrates the Next.js 12 method of fetching data from a third-party service.
export default function About({data}) {
return "...".
}
function getServerSideProps(){
// get data from external API
constres = await fetch(https://.../data)
constdata = awaitres.json()
// Pass data to the page via props return
return{
props: { data }
}
}
This way API requests have been simplified, it’s very intuitive and easy to understand now in newer versions.
4. Streaming media
Previously, users might have to wait for the entire page to be generated. Now, the server will deliver small chunks of content to the client as the UI is generated. This means that large fragments do not get in the way of small fragments. Of course, for now, this feature only supports app directories, and that doesn’t appear to be changing.
The new feature won’t benefit individuals with strong internet connections or fast Wi-Fi as much as those with weaker connections. In fact, there are more such people than you might think. Faster website load times will improve user experience, which is great.
5. Turbopack
The last big change introduced with the Next.js 13 release is a new JavaScript bundler called Turbopack, which is billed as the “successor to Webpack”. Webpack is one of the most commonly used JavaScript build tools, it is powerful and configurable, but it can be slow and complicated at times.
Developed by the creators of Webpack, Turbopack is built in Rust and promises to be 700 times faster than the original Webpack (and 10 times faster than the more modern alternative, Vite).
Other upgrades
next/image
The new image component in Next.js includes less client-side JavaScript, styling and configuration, and improves accessibility. In terms of code changes, the import of next/legacy/image has been renamed to next/image, and the import of next/future/image has been changed to next /image. There is a codemod available for quick migration.
next/font
You can use Google Fonts (or any other custom font) with the new @next/font without the browser submitting any queries. Along with other static assets, CSS and font files are downloaded at build time.
next/link:
It is a novel font system that improves efficiency and privacy by providing automatic font optimization, the possibility to integrate custom fonts, and all this without using any external network requests.
Summary
The recently launched Next.js 13 brings many new features and upgrades, such as new routing, new data acquisition method (React suspense), Vercel font, og image generation, layout, etc. [2]. They can be game-changing and promise extreme speed, but they come with some trade-offs [2]. However, it is important to note that despite these innovative features being introduced to the latest React, many important features are still at the RFC stage and thus may not be available in Next.js 13 [1].
Next.js 13 also has other new features and upgrades such as app/directory for file-based routing [3], React server components, asynchronous component data fetching, streaming, Turbopack, etc. [3]. These upgrades bring significant performance improvements, making Next.js ideal for building modern web applications.
Overall, the new features and upgrades of Next.js 13 are very promising and have great potential, but since many of them are still under development, there may be some problems. Still, Next.js 13 is a solid choice for modern web applications, especially for developers looking to improve performance and improve user experience.
Original: https://blog.bitsrc.io/why-next-js-13-is-a-game-changer-2167658d9de2
The possible bugs after the code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend Fundebug, a useful bug monitoring tool.
Communication
Have a dream, have dry goods, search [Great Move to the World] on WeChat to pay attention to this dishwashing wisdom who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.