Next.js Version 10 release features
Wed Dec 23 2020

Next.js Version 10 release features

Awa Dieudonne

Awa Dieudonne


<p>Nextjs has had over 20 new features that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%.</p><p>&nbsp;</p><h3>Automatic image optimization</h3><blockquote><p><i>Because the web is not only made of JS, they’ve also introduced automatic image optimization by introducing a component that will replace the HTML&nbsp;<strong>&lt;img&gt;</strong>&nbsp;element.</i></p></blockquote><p>&nbsp;</p><ol><li>When using the Image component from next/image, images are automatically lazy-loaded.</li><li>Whenever a large image is used on phone screens, the next/image component will automatically generate smaller sizes through built-in Image Optimization.</li><li>Built-in Image Optimization automatically serves the images in modern image formats like WebP, which is about 30% smaller than JPEG</li></ol><ul><li>&nbsp;</li></ul><h3>Internationalize Routing</h3><blockquote><p><i>Built-in support for internationalized routing and language detection.</i></p></blockquote><p>&nbsp;</p><ol><li>This supports Next.js’s hybrid strategy, meaning you can choose between Static Generation or Server-Rendering on a per-page basis.</li><li>Next.js 10 supports the two most common routing strategies: subpath routing and domain routing.</li><li>Subpath routing puts the locale in the URL. This allows all languages to live on a single domain.</li><li>Domain routing enables you to map a locale to a top-level domain.</li><li>Next.js 10 has built-in language detection on the / route based on the `Accept-Language` header, which all modern browsers support.</li></ol><ul><li>&nbsp;</li></ul><h3>Next.js Analytics</h3><blockquote><p><i>The solution for tracking real-world performance metrics and feeding those insights back into your development workflow.</i></p></blockquote><p>&nbsp;</p><p><strong>With Next.js Analytics:</strong></p><ol><li>Instead of measuring once, you will now measure continuously.</li><li>Instead of measuring on your development device, measurements will come from the actual devices that your visitors are using.</li></ol><ul><li>&nbsp;</li></ul><h3>Core Web Vitals</h3><blockquote><p><i>Google, in conjunction with the Web Performance Working Group, has established the set of metrics to accurately measure how users experience the performance of your website: aptly named, Web Vitals.</i></p></blockquote><p>&nbsp;</p><p>Web Vitals are metrics that track the perceived loading speed, responsiveness, and visual stability of your website — all three essential for the web site's overall health!</p><p>&nbsp;</p><h3>getStaticProps / getServerSideProps Fast Refresh</h3><blockquote><p><i>When making edits to your getStaticProps and getServerSideProps functions Next.js will now automatically re-run the function and apply the new data. This allows you to iterate quickly without having to refresh the page.</i></p></blockquote><p>&nbsp;</p><h3>Automatic Resolving of `href`</h3><blockquote><p><i>As part of Next.js 10, you no longer have to use them as property for the majority of use-cases on the Link component from next/link</i></p></blockquote><p>e.g<br>&lt;Link href=”/categories/[slug]” as=”/categories/books”&gt; becomes &lt;Link as=”/categories/books”&gt;</p><p>&nbsp;</p><h3>Conclusion</h3><p>In conclusion, I am always excited about good things.</p><p>So after going through the&nbsp;<a href="">Next.js 10 release blog post</a>, I thought summarising the features will help the future me retain the version 10 features.</p><p>After summarising for myself, I thought it will also make sense to share it with those who might not have the time to go through the post as I did.</p>
0 comment(s)

Leave a Comment

Your email address will not be published. Required fields are marked *


Interested in hearing more from me?
© 2021. All Rights Reserve.