{"id":1016,"date":"2023-11-19T15:42:47","date_gmt":"2023-11-19T15:42:47","guid":{"rendered":"https:\/\/bluesockets.com\/?p=1016"},"modified":"2024-02-05T01:58:04","modified_gmt":"2024-02-05T01:58:04","slug":"do-you-need-to-upgrade-to-next-js-14","status":"publish","type":"post","link":"https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/","title":{"rendered":"Upgrading from Next.js 13 to Next.js 14"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-1024x512.png\" alt=\"Next.js 14 banner; Should you upgrade?\" class=\"wp-image-1043\" srcset=\"https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-1024x512.png 1024w, https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-300x150.png 300w, https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-768x384.png 768w, https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-1536x768.png 1536w, https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14-2048x1024.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Only about a year after the release of Next.js version 13, the Vercel team introduced version 14. You might be wondering, &#8216;What new APIs or features will I have to learn?&#8217; The answer is none. <strong>No new APIs were introduced<\/strong>. Instead, Next.js was enhanced to be better and faster. In this article, we will explore whether upgrading to Next.js 14 is worth it.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" id=\"ub_table-of-contents-08ba645d-713d-4eda-bf8a-cd7a0fef6c18\" data-initiallyhideonmobile=\"false\"\n                    data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\"><div class=\"ub_table-of-contents-header\">\n                    <div class=\"ub_table-of-contents-title\">Table of Contents<\/div><\/div><\/div><div class=\"ub_table-of-contents-extra-container\"><div class=\"ub_table-of-contents-container ub_table-of-contents-2-column \"><ul><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#0-the-evolution-nextjs-13-to-nextjs-14>The Evolution: Next.js 13 to Next.js 14<\/a><ul><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#1-nextjs-13-recap>Next.js 13 Recap<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#2-nextjs-14-unveiled>Next.js 14 Unveiled<\/a><\/li><\/ul><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#3-whats-new-in-nextjs-14>What&#8217;s New in Next.js 14<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#4-breaking-changes>Breaking Changes<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#5-should-you-upgrade-to-nextjs-14>Should You Upgrade to Next.js 14?<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#6-step-by-step-upgrading-from-nextjs-13-to-14>Step-by-Step: Upgrading from Next.js 13 to 14<\/a><ul><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#7-step-1-update-node-version>Step 1: Update Node Version<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#8-step-2-upgrade-to-nextjs-14>Step 2: Upgrade to Next.js 14<\/a><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#9-step-3-fix-the-breaking-changes>Step 3: Fix the Breaking Changes<\/a><\/li><\/ul><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#10-bonus-partial-prerendering-preview>Bonus: Partial Prerendering (Preview)<\/a><ul><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#11-dynamic-loading-without-extra-network-roundtrips>Dynamic Loading without Extra Network Roundtrips<\/a><\/li><\/ul><\/li><li><a href=https:\/\/bluesockets.com\/next\/do-you-need-to-upgrade-to-next-js-14\/#12-final-thoughts>Final Thoughts<\/a><\/li><\/ul><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-the-evolution-nextjs-13-to-nextjs-14\">The Evolution: Next.js 13 to Next.js 14<\/h2>\n\n\n<p>To understand the significance of this upgrade, let\u2019s compare Next.js 13 with its latest iteration, Next.js 14.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"1-nextjs-13-recap\">Next.js 13 Recap<\/h3>\n\n\n<p>Next.js 13 introduced various features enhancing performance, security, and developer experience. Highlights include a new <em><strong>\/app<\/strong><\/em> directory for improved routing, <a href=\"https:\/\/turbo.build\/pack\" data-type=\"link\" data-id=\"https:\/\/turbo.build\/pack\" target=\"_blank\" rel=\"noreferrer noopener\">Turbopack<\/a> (a successor to Wepback), improved font, image and link components, and <a href=\"https:\/\/bluesockets.com\/next\/next-js-13\/\" data-type=\"post\" data-id=\"375\">more<\/a>. No doubt the most fundamental shift was the change to Server Components, a React 18 feature, as the default for components created in the \/app directory. This is now paving the way for Server Actions, a way to interact with your backend without manually creating an API route, to be more widely adopted. If you are still unfamiliar with or not fully caught up with all the changes made in Next.js 13, you may find <a href=\"https:\/\/bluesockets.com\/next\/next-js-13\/\" data-type=\"post\" data-id=\"375\">this article<\/a> useful.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"2-nextjs-14-unveiled\">Next.js 14 Unveiled<\/h3>\n\n\n<p>In contrast, Next.js 14 does not introduce any new APIs and only has minor breaking changes. It amplifies these advancements made in Next.js 13. <a href=\"https:\/\/bluesockets.com\/next\/simplifying-next-js-server-actions\/\" data-type=\"post\" data-id=\"761\">Server Actions<\/a> are now stable and notably, Turbopack, the Rust-based compiler, has undergone rigorous testing resulting in a faster local server startup and code update speed with Fast Refresh.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"3-whats-new-in-nextjs-14\">What&#8217;s New in Next.js 14<\/h2>\n\n\n<ul>\n<li><strong>Faster Turbopack<\/strong>: For a more in-depth look at Turbopack and how to utilize it, visit this <a href=\"https:\/\/bluesockets.com\/next\/using-turbopack-with-next-js\/\" data-type=\"post\" data-id=\"711\">article<\/a>.<\/li>\n\n\n\n<li><strong>Server Actions are stable<\/strong>: The introduction of Stable Server Actions simplifies backend integration by enabling direct function calls from React components, bypassing the need for separate API routes.<\/li>\n\n\n\n<li><strong>Partial Rendering is in preview<\/strong>: Compiler optimization for dynamic content with rapid initial static responses; streamlining rendering complexities without the need to learn new APIs. More on this later.<\/li>\n\n\n\n<li><strong>Official <em>free<\/em> Next.js course was released<\/strong>: A comprehensive course covering diverse aspects of Next.js, catering to developers&#8217; needs. <a href=\"https:\/\/nextjs.org\/learn\" data-type=\"link\" data-id=\"https:\/\/nextjs.org\/learn\" target=\"_blank\" rel=\"noreferrer noopener\">Visit course<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>To learn more about these changes you can visit the <a href=\"https:\/\/nextjs.org\/blog\/next-14\" data-type=\"link\" data-id=\"https:\/\/nextjs.org\/blog\/next-14\" target=\"_blank\" rel=\"noreferrer noopener\">official release notes<\/a> for version 14.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-breaking-changes\">Breaking Changes<\/h2>\n\n\n<ul>\n<li><code>@next\/font<\/code> has been changed to <code>next\/font<\/code>.<\/li>\n\n\n\n<li><code>ImageResponse<\/code>&nbsp;import has been changed from&nbsp;<code>next\/server<\/code>&nbsp;to&nbsp;<code>next\/og<\/code>.<\/li>\n\n\n\n<li>WASM Target for <code>next-swc<\/code> has been removed.<\/li>\n\n\n\n<li><code>next export<\/code>&nbsp;is now deprecated. Use&nbsp;<code>output: 'export'<\/code>. Learn more <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying\/static-exports\" data-type=\"link\" data-id=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying\/static-exports\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li>\n\n\n\n<li>The minimum Node version required is now <strong>18.7<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><em>Official source <a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/upgrading\/version-14#v14-summary\" data-type=\"link\" data-id=\"https:\/\/www.freecodecamp.org\/news\/node-version-manager-nvm-install-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/em><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"5-should-you-upgrade-to-nextjs-14\">Should You Upgrade to Next.js 14?<\/h2>\n\n\n<p>It is not mandatory to upgrade immediately. However, it is highly recommended <br>to explore the advancements and potential benefits that Next.js 14 offers for your specific project&#8217;s needs and future growth. If your project stands to gain from enhanced performance and scalability and streamlined backend integrations, then you should definitely upgrade. If your project is already at version 13, then it also makes sense to upgrade as it is mostly a matter of upgrading dependencies and updating imports.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"6-step-by-step-upgrading-from-nextjs-13-to-14\">Step-by-Step: Upgrading from Next.js 13 to 14<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"7-step-1-update-node-version\">Step 1: Update Node Version<\/h3>\n\n\n<p>You can check your current node version by executing this command in the terminal:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:8.4296875px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"node --version\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">node<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">--version<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>The minimum node version required is now <strong>18.7<\/strong>. If your version is older than this you can use <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" data-type=\"link\" data-id=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noreferrer noopener\">Node Version Manager (NVM)<\/a> to install the latest version for your project, package managers like <strong>Homebrew<\/strong> (Mac) or <strong>Chocolatey<\/strong> (Windows) or you can download the latest version directly from the <a href=\"https:\/\/nodejs.org\/en\/download\/\" data-type=\"link\" data-id=\"https:\/\/nodejs.org\/en\/download\/\">website<\/a>. Out of these options, NVM is the most convenient. It allows you to manage multiple node versions and switch between them for different projects. Here is an <a href=\"https:\/\/www.freecodecamp.org\/news\/node-version-manager-nvm-install-guide\/\" data-type=\"link\" data-id=\"https:\/\/www.freecodecamp.org\/news\/node-version-manager-nvm-install-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">installation guide<\/a>. Once installed you can download the latest version of Node using:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:8.4296875px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"nvm install node\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">nvm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">install<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">node<\/span><\/span><\/code><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-2-upgrade-to-nextjs-14\">Step 2: Upgrade to Next.js 14<\/h3>\n\n\n<p>Assuming you are using the popular package manager node <code>npm<\/code>, you may use:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:8.4296875px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm i next@latest react@latest react-dom@latest eslint-config-next@latest\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">i<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">next@latest<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">react@latest<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">react-dom@latest<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">eslint-config-next@latest<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Optional<\/strong>: If you are using Typescript you must also upgrade <code>@types\/react<\/code> and <code>@types\/react-dom<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:8.4296875px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm i @types\/react@latest\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">i<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">@types\/react@latest<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:8.4296875px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm i @types\/react-dom@latest\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">i<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">@types\/react-dom@latest<\/span><\/span><\/code><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"9-step-3-fix-the-breaking-changes\">Step 3: Fix the Breaking Changes<\/h3>\n\n\n<p>Now that you have upgraded, it is time to fix any breaking changes. Run your project and take note of the errors that appear. They will likely all be associated with the breaking changes introduced in Next 14 (as covered in the previous section). For upgrading, there are <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/upgrading\/codemods#140\" data-type=\"link\" data-id=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/upgrading\/codemods#140\" target=\"_blank\" rel=\"noreferrer noopener\">codemods available<\/a> that will automatically update your codebase.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"10-bonus-partial-prerendering-preview\">Bonus: Partial Prerendering (Preview)<\/h2>\n\n\n<p>In Next.js 14, one of the exciting additions is the enticing prospect of Partial Prerendering. It introduces a blend of static initial responses and streaming dynamic content\u2014all without requiring the need to learn a new API. Partial Prerendering leverages React Suspense.<\/p>\n\n\n\n<p>As of the time of writing this article, <strong>Partial prerendering is under active development.<\/strong><\/p>\n\n\n\n<p>Let\u2019s delve into a snippet showcasing how Partial Prerendering operates within a Next.js project:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:16.859375px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ app\/page.tsx\n\nexport default function Page() {\n  return (\n    &lt;main&gt;\n      &lt;header&gt;\n        &lt;h1&gt;My Store&lt;\/h1&gt;\n        &lt;Suspense fallback={&lt;CartSkeleton \/&gt;}&gt;\n          &lt;ShoppingCart \/&gt;\n        &lt;\/Suspense&gt;\n      &lt;\/header&gt;\n      &lt;Banner \/&gt;\n      &lt;Suspense fallback={&lt;ProductListSkeleton \/&gt;}&gt;\n        &lt;Recommendations \/&gt;\n      &lt;\/Suspense&gt;\n      &lt;NewProducts \/&gt;\n    &lt;\/main&gt;\n  );\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/\/ app\/page.tsx<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">export<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">default<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Page<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;main&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;header&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">My Store<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">Suspense<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">fallback<\/span><span style=\"color: #81A1C1\">={&lt;<\/span><span style=\"color: #8FBCBB\">CartSkeleton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">ShoppingCart<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;\/<\/span><span style=\"color: #8FBCBB\">Suspense<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;\/header&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">Banner<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">Suspense<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">fallback<\/span><span style=\"color: #81A1C1\">={&lt;<\/span><span style=\"color: #8FBCBB\">ProductListSkeleton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;}&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">Recommendations<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;\/<\/span><span style=\"color: #8FBCBB\">Suspense<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">NewProducts<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/main&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>By defining Suspense boundaries, the page generates a static shell during the initial load based on these boundaries. The React Suspense fallbacks are prerendered within this shell.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"11-dynamic-loading-without-extra-network-roundtrips\">Dynamic Loading without Extra Network Roundtrips<\/h3>\n\n\n<p>The magic of Partial Prerendering unfolds when a request is initiated\u2014the static HTML shell is promptly served. However, as the application detects dynamic components like <code>&lt;ShoppingCart \/&gt;<\/code> requiring user-specific data, these components are streamed in the same HTTP request as the static shell. Importantly, no additional network roundtrips are necessitated, optimizing performance and ensuring swift, personalized user experiences.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"12-final-thoughts\">Final Thoughts<\/h2>\n\n\n<p>Web development evolves constantly, each upgrade unlocking new possibilities. Next.js 14 offers turbocharged performance, simplified backend actions, and a peek into future rendering. However, upgrading should align with your project&#8217;s unique needs and growth plans.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Only about a year after the release of Next.js version 13, the Vercel team introduced version 14. You might be wondering, &#8216;What new APIs or features will I have to<\/p>\n","protected":false},"author":1,"featured_media":1043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","footnotes":""},"categories":[36],"tags":[41,89,10],"featured_image_src":"https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/11\/Next-14.png","author_info":{"display_name":"Rajae Robinson","author_link":"https:\/\/bluesockets.com\/author\/rajae\/"},"acf":[],"_links":{"self":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1016"}],"collection":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/comments?post=1016"}],"version-history":[{"count":9,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1016\/revisions"}],"predecessor-version":[{"id":1365,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1016\/revisions\/1365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/media\/1043"}],"wp:attachment":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/media?parent=1016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/categories?post=1016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/tags?post=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}