{"id":22884,"date":"2022-11-25T06:46:41","date_gmt":"2022-11-25T06:46:41","guid":{"rendered":"https:\/\/www.aceinfoway.com\/blog\/?p=22884"},"modified":"2022-11-25T09:41:00","modified_gmt":"2022-11-25T09:41:00","slug":"next-js-version-13-latest-features-and-upgrade-guide","status":"publish","type":"post","link":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide","title":{"rendered":"Next.JS version 13: Latest Features and Upgrade Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_37 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\">Table of Contents<\/p>\r\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#What_was_the_need_for_NextJS_13\" title=\"What was the need for Next.JS 13?\">What was the need for Next.JS 13?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#Whats_new_embedded_in_NextJS_13\" title=\"What\u2019s new embedded in Next.JS 13?\">What\u2019s new embedded in Next.JS 13?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#Nextjs_Performance_Checklist\" title=\"Next.js Performance Checklist\">Next.js Performance Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_Turbopack\" title=\"# Turbopack\"># Turbopack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_New_app_Directory\" title=\"# New app Directory\"># New app Directory<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_Fresh_Font_System\" title=\"# Fresh Font System\"># Fresh Font System<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_New_image_component\" title=\"# New image component\"># New image component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_Dynamic_Social_Cards\" title=\"# Dynamic Social Cards\"># Dynamic Social Cards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#_Middleware_API_updates\" title=\"# Middleware API updates\"># Middleware API updates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\/#Wrap_up\" title=\"Wrap up\">Wrap up<\/a><\/li><\/ul><\/nav><\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"What_was_the_need_for_NextJS_13\"><\/span><b>What was the need for Next.JS 13?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js. Some stipulations made it hard to keep it effective. Previously, next.js usage came with the expense of costly, always-on infrastructure, requiring manual provision, and extensive operations.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, primary versions were meant to juggle two sets of runtime APIs with no JS in the server, and web standard APIs in the browser. It was limited to single region origin, depending on legacy, static, and CDN caching to try to perform and scale.\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These were the main reasons as explained by <\/span><a href=\"https:\/\/nextjs.org\/conf\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Next.js team<\/span><\/a><span style=\"font-weight: 400;\"> that encouraged to bring out a version to make it <\/span><b>dynamic without limits<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s dig deep to understand what makes Next.JS 13 limitless.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Whats_new_embedded_in_NextJS_13\"><\/span><b>What\u2019s new embedded in Next.JS 13?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The new release of next.js, as introduced on 25th October 2022, is version 13 of Next.js. It has some considerable changes that you need to understand to structure your project on the go with zero destructive codings.\u00a0 Here are the three major categories that will be discussed thoroughly in this article.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Three major categories of Next.js 13 update:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Compiler Infrastructure\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rendering Infrastructure<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Component Toolkit<\/span><\/li>\n<\/ul>\n<style type=\"text\/css\">\r\n\t\t#dae-shortcode22889-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 80% !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode22889-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode22889-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode22889-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t<img class=\"dae-shortcode-download-file-image\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Thumbnail-Next.JS-Performance.jpg\" width=\"2500\" height=\"2500\" \/>\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\"><span class=\"ez-toc-section\" id=\"Nextjs_Performance_Checklist\"><\/span>Next.js Performance Checklist<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\t\t\t\t<div class=\"dae-shortcode-download-text\">Get this eBook in a portable document format &amp; access it offline.<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">DOWNLOAD NOW<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Get your free copy<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"Next.JS-Performance_Ace_Infoway.pdf\" \/>\r\n\t\t\t\t\t\t<div class=\"custom-form-wrap\">\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Submit\" \/>\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<div class=\"gglcptch gglcptch_v2\"><div id=\"gglcptch_recaptcha_677392138\" class=\"gglcptch_recaptcha\"><\/div>\r\n\t\t\t\t<noscript>\r\n\t\t\t\t\t<div style=\"width: 302px;\">\r\n\t\t\t\t\t\t<div style=\"width: 302px; height: 422px; position: relative;\">\r\n\t\t\t\t\t\t\t<div style=\"width: 302px; height: 422px; position: absolute;\">\r\n\t\t\t\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/recaptcha\/api\/fallback?k=6LdFRZklAAAAABYU3B0d48jQxFZYjxxTXIVK6vy3\" frameborder=\"0\" scrolling=\"no\" style=\"width: 302px; height:422px; border-style: none;\"><\/iframe>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div style=\"border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;\">\r\n\t\t\t\t\t\t\t<textarea id=\"g-recaptcha-response\" name=\"g-recaptcha-response\" class=\"g-recaptcha-response\" style=\"width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;\"><\/textarea>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/noscript><\/div>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\n<p><span style=\"font-weight: 400;\">Let\u2019s take on board the anatomy of Next.js 13 new features.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"_Turbopack\"><\/span><b># Turbopack<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Initially, it was obvious to write JavaScript tooling in JavaScript, required tools like Babel, Terser, and WebPack. With the growing size and complexity of front-end applications, all these toolings faced bumbling to keep up.\u00a0 For this, the transition was initiated to native rust-powered tooling.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It started by migrating away from Babel, which resulted in 17 times faster transpilation. Terser was next replaced to result in six times faster minification.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Similarly, Webpack has become an integral part of building the web that now needed to be reconditioned to build the web\u2019s next-generation bundler.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a cause, this architecture is generated by utilizing the experience of 10 years of WebPack combined with the innovations in the incremental computation from Turborepo and Google\u2019s Bazel, which is intended to withstand the next 10 years.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hence, the latest version of Next.js introduces a rust-based successor of WebPack named <\/span><b>TurboPack.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">TurboPack in Next.js 13 shows,<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">700 times faster updates than Webpack<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">10 times faster updates than Vite<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">4 times faster cold starts than Webpack<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Additionally, Turbopack provides a wide range of features to have these fast and flexible development services:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Incremental by design that performs tasks like never before<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Eco-system friendly (support for TypeScript, JSX, CSS, CSS modules, Web Assembly, and more)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lightning-fast HMR regardless of the size of your app<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Native support for React server components<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simultaneous multiple environment targets<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Power to production builds both locally and in the cloud<\/span><\/li>\n<\/ul>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=riazxrazor.html-to-jsx&amp;ssr=false#overview\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-22900 size-full\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Convert-your-HTML-text-to-JSX.gif\" alt=\"Convert your HTML text to JSX\" width=\"1024\" height=\"570\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"_New_app_Directory\"><\/span><b># New <\/b><b>app<\/b><b> Directory<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">One another important component of Next.js is the <\/span><b>file system-based router<\/b><span style=\"font-weight: 400;\">, which requires no configuration. Having served the feature to the largest web applications in the world it shares new opportunities to enhance it even more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the previous versions of next.js, any file created inside the<\/span> <span style=\"font-weight: 400;\">pages<\/span><span style=\"font-weight: 400;\"> directory would act as the route in the UI. The new app directory works adjacent to the <\/span><span style=\"font-weight: 400;\">pages<\/span><span style=\"font-weight: 400;\"> directory to support incremental adoption and provides other new features like server-side rendering and static-site rendering.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The new<\/span> <span style=\"font-weight: 400;\">app<\/span><span style=\"font-weight: 400;\"> directory supports other attributes like: layouts, server components, streaming, and data fetching.<\/span><\/p>\n<p><b>Layouts<\/b><span style=\"font-weight: 400;\"> \u2013 Here in Next.js 13 it has become easier to extract shared code between multiple layouts. Each directory accounts page.tsx\/jsx file as the content. Whereas, layout.tsx\/jsx describes the template for both that page and the subdirectories. Thus, generating nested templates become simple.<\/span><\/p>\n<blockquote class=\"related-post\">\n<div class=\"related-post-img\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/04\/react-native-development-top-5-reasons-advantages-to-choose-for-your-business.gif\" alt=\"\" width=\"800\" height=\"409\" \/><\/div>\n<div class=\"related-post-text\">\n<h4>Top 5 Reasons to choose React Native Development for your Business<\/h4>\n<p><a class=\"bluebtn1 btnarrow\" href=\"https:\/\/www.aceinfoway.com\/blog\/why-react-native-development\" target=\"_blank\" rel=\"noopener\">Explore<\/a><\/p>\n<\/div>\n<\/blockquote>\n<p><b>Server Components<\/b><span style=\"font-weight: 400;\"> \u2013 The latest version supports React\u2019s new server components architecture. This attribute allows for building fast, highly-interactive apps with an exclusive programming model to provide a great developing experience. This also lays a foundation to build complex interfaces at the same time reducing the amount of JavaScript sent to clients, which causes faster initial page loads.\u00a0<\/span><\/p>\n<p><b>Streaming<\/b><span style=\"font-weight: 400;\"> \u2013 Next.js 13 component introduces the competence to progressively provide and incrementally stream provided units of the UI to the client. With this attribute, a developer is able to instantly render the parts of the page that do not specifically require data and show a loading state for parts of the page that are fetching data. Instant loading states allow pre-rendering loading indicators like skeletons and spinners, or a small but meaningful part of future screens such as cover photos. This consequently helps in better app understanding and ultimately better user experience.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-22885\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/New-app-Directory.jpg\" alt=\"Next.JS version 13\" width=\"1024\" height=\"524\" \/><\/p>\n<p><b>Data fetching<\/b><span style=\"font-weight: 400;\"> \u2013 The native <\/span><span style=\"font-weight: 400;\">fetch<\/span><span style=\"font-weight: 400;\"> web API has been extended in React and Next.js which automatically provides one flexible way to fetch, cache, and revalidate data at the component level. This denotes that all the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) will now be available through one API. <\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"_Fresh_Font_System\"><\/span><b># Fresh Font System<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The latest version Next.js 13 presents a brand new font system with amazing properties,<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Automatic optimization of fonts including custom fonts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Improved privacy and performance by removal of external network requests<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Integral impromptu self-hosting for any font file<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Zero layout shift automatically using the CSS<\/span> <span style=\"font-weight: 400;\">size-adjust<\/span><span style=\"font-weight: 400;\"> property<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The fresh font system in Next.js 13 allows the handily use all Google Fonts with performance and privacy in mind. Any desirable font can be imported using <\/span><span style=\"font-weight: 400;\">@next\/font\/google<\/span><span style=\"font-weight: 400;\"> as a function. This is how you can use the selected font on all the pages:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-22886\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Fresh-Font-System.jpg\" alt=\"Next.JS version 13\" width=\"1024\" height=\"303\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Even the local custom fonts are supported along with automatic self-hosting, caching, and preloading font files, with the freedom to customize every part of the font loading experience. This still ensures great performance and no layout shift covering the <\/span><span style=\"font-weight: 400;\">font-display<\/span><span style=\"font-weight: 400;\">, preloading, fallbacks, and more.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"_New_image_component\"><\/span><b># New<\/b> <b>image<\/b><b> component<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A huge portion of the web is made up of images accounting for 44% of a page\u2019s weight on average. Getting the images right is crucial, hence integrating this new <\/span><span style=\"font-weight: 400;\">image<\/span><span style=\"font-weight: 400;\"> component in Next.js 13 is quite compelling.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The new version put forward substantial improvements to the<\/span> <span style=\"font-weight: 400;\">image<\/span><span style=\"font-weight: 400;\"> component in performance as well as developer experience. For the web platforms available across all major browsers, this new <\/span><span style=\"font-weight: 400;\">image<\/span><span style=\"font-weight: 400;\"> component set forth,\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Native lazy-loading<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Better performance\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Improved accessibility<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Reduced size<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Less usage of client-side JavaScripts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Maintains familiar interface<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"_Dynamic_Social_Cards\"><\/span><b># Dynamic Social Cards<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Also known as open graph images, social cards that has the capability to massively increase the engagement rate of clicks on your web content. The developer community experiences 40% better conversions using dynamic social cards.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Static social cards are time-consuming, error-prone, and hard to maintain. Moreover, having personalized and computed social cards were laborious and expensive, until now.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next.js 13 version brings an affordable and contented solution for generating dynamic social cards \u2013 OG Image Generation. This outlook is 5 times faster than the existing solution. It utilizes the Vercel edge functions, web assembly, and an advanced new core library for converting HTML and CSS into images and leverages React component abstraction.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">OG Image generation is the combination of simple components with global edge infrastructure that enables amazing experiences on the web and requires no headless web browsers, and no costly infrastructure.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">@vercel\/og<\/span><span style=\"font-weight: 400;\"> will spontaneously add the correct headers to cache computed images at the edge which helps in making this feature cost-effective.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The other features supported with OG image generation include:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Absolute positioning of basic CSS layouts\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Customizing fonts, text wrapping, centering, and nested images<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Compatibility with any Vercel deployed frameworks and applications<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Take a look at this example for generating a social card image with HTML and CSS.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-22887\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Dynamic-Social-Cards.jpg\" alt=\"Next.JS version 13\" width=\"1024\" height=\"524\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"_Middleware_API_updates\"><\/span><b># Middleware API updates<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In Next.js 12 there was an addition of new properties that improve the developer&#8217;s experience with stable middleware. In Next.js 13, middleware can now modify request headers, response headers, and send responses.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It allows running code before a request is completed and even can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take a look at how you can set request and response headers using <\/span><span style=\"font-weight: 400;\">NextResponse<\/span><span style=\"font-weight: 400;\"> API,<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-22888\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Middleware-API-updates.jpg\" alt=\"Next.JS version 13\" width=\"1024\" height=\"524\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wrap_up\"><\/span><b>Wrap up<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Next.js 13 opens the way for a new era of web development by announcing the advancements in three major categories:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Turbopack \u2013 which pushes incremental development changes in as little as single-digit seconds production builds.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">App directory \u2013 makes React pages optimal serverless with edged infrastructure to deliver dynamic, cost-effective static.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Toolkit expansion \u2013 fetches the best of both worlds, simple abstractions which unlock powerful personalization for your brand.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Overall, Next.js 13 enables the use of tooling that prioritizes accessibility and performance which is very important as it allows you to focus on ideation and experimentation within the project. This upgradation will allow people to work seamlessly and efficiently as they want anywhere by building a faster, more performant, and accessible web.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At Ace Infoway, we help businesses develop their web application to fulfill their business objectives. Our team of expert web developers is always ready to assist your journey of upgradation to the newest technology. Reach out to us for a more detailed discussion on frontend frameworks, our team is by your side to create amazing UI for your<\/span><a href=\"https:\/\/www.aceinfoway.com\/web-application-development\" target=\"_blank\" rel=\"noopener\"> <b>Custom Web Application Development<\/b><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<div class=\"bf-newsletter cf-upload\">\n<h4>Want to upgrade your project to NEXT.JS 13?<\/h4>\n<p>Connect with our experts NOW!<\/p>\n[contact-form-7 404 \"Not Found\"]\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What was the need for Next.JS 13? The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites. However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js. [&hellip;]<\/p>\n","protected":false},"author":769416,"featured_media":22893,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway\" \/>\r\n<meta property=\"og:description\" content=\"What was the need for Next.JS 13? The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites. However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js. [&hellip;]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\" \/>\r\n<meta property=\"og:site_name\" content=\"Ace Infoway\" \/>\r\n<meta property=\"article:published_time\" content=\"2022-11-25T06:46:41+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-11-25T09:41:00+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\r\n\t<meta property=\"og:image:height\" content=\"524\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Nirav Oza\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nirav Oza\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\",\"name\":\"Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway\",\"isPartOf\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\"},\"datePublished\":\"2022-11-25T06:46:41+00:00\",\"dateModified\":\"2022-11-25T09:41:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/456b7634f26f562ed6f5c90cc649d1cb\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.aceinfoway.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.JS version 13: Latest Features and Upgrade Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/\",\"name\":\"Ace Infoway\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/456b7634f26f562ed6f5c90cc649d1cb\",\"name\":\"Nirav Oza\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/674b9a6190be5aa711f0da4e65c32175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/674b9a6190be5aa711f0da4e65c32175?s=96&d=mm&r=g\",\"caption\":\"Nirav Oza\"},\"description\":\"Nirav helps clients in their growth and transformation towards digitization by analyzing business issues, devising continuous improvements to increase efficiency, streamlining operational\/production workflow, and decreasing aggregate expenses with optimum utilization of technology.\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide","og_locale":"en_US","og_type":"article","og_title":"Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway","og_description":"What was the need for Next.JS 13? The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites. However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js. [&hellip;]","og_url":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide","og_site_name":"Ace Infoway","article_published_time":"2022-11-25T06:46:41+00:00","article_modified_time":"2022-11-25T09:41:00+00:00","og_image":[{"width":1024,"height":524,"url":"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg","type":"image\/jpeg"}],"author":"Nirav Oza","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nirav Oza","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide","url":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide","name":"Next.JS version 13: Latest Features and Upgrade Guide - Ace Infoway","isPartOf":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#website"},"datePublished":"2022-11-25T06:46:41+00:00","dateModified":"2022-11-25T09:41:00+00:00","author":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/456b7634f26f562ed6f5c90cc649d1cb"},"breadcrumb":{"@id":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.aceinfoway.com\/blog\/next-js-version-13-latest-features-and-upgrade-guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.aceinfoway.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Next.JS version 13: Latest Features and Upgrade Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.aceinfoway.com\/blog\/#website","url":"https:\/\/www.aceinfoway.com\/blog\/","name":"Ace Infoway","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/456b7634f26f562ed6f5c90cc649d1cb","name":"Nirav Oza","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/674b9a6190be5aa711f0da4e65c32175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/674b9a6190be5aa711f0da4e65c32175?s=96&d=mm&r=g","caption":"Nirav Oza"},"description":"Nirav helps clients in their growth and transformation towards digitization by analyzing business issues, devising continuous improvements to increase efficiency, streamlining operational\/production workflow, and decreasing aggregate expenses with optimum utilization of technology."}]}},"rttpg_featured_image_url":{"full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"landscape":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"portraits":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-150x150.jpg",150,150,true],"medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-300x154.jpg",300,154,true],"large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"1536x1536":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"2048x2048":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false],"blog-large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-669x272.jpg",669,272,true],"blog-medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-320x202.jpg",320,202,true],"portfolio-full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-940x400.jpg",940,400,true],"portfolio-one":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-540x272.jpg",540,272,true],"portfolio-two":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-460x295.jpg",460,295,true],"portfolio-three":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-300x214.jpg",300,214,true],"portfolio-five":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-177x142.jpg",177,142,true],"recent-posts":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-700x441.jpg",700,441,true],"recent-works-thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5-66x66.jpg",66,66,true],"200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",200,102,false],"400":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",400,205,false],"600":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",600,307,false],"800":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",800,409,false],"1200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2022\/11\/Next.JS-version-13-5.jpg",1024,524,false]},"rttpg_author":{"display_name":"Nirav Oza","author_link":"https:\/\/www.aceinfoway.com\/blog\/author\/nirav-oza"},"rttpg_comment":4,"rttpg_category":"<a href=\"https:\/\/www.aceinfoway.com\/blog\/advanced-technologies\" rel=\"category tag\">Advanced Technologies<\/a>","rttpg_excerpt":"What was the need for Next.JS 13? The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites. However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js.&hellip;","_links":{"self":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/22884"}],"collection":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/users\/769416"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/comments?post=22884"}],"version-history":[{"count":6,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/22884\/revisions"}],"predecessor-version":[{"id":22901,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/22884\/revisions\/22901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media\/22893"}],"wp:attachment":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media?parent=22884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/categories?post=22884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/tags?post=22884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}