{"id":25244,"date":"2024-01-04T15:01:51","date_gmt":"2024-01-04T14:01:51","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=25244"},"modified":"2024-01-10T16:33:14","modified_gmt":"2024-01-10T15:33:14","slug":"next-js-14-all-the-innovations","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/","title":{"rendered":"Next.js 14: All the Innovations Making Deployment Simple and Efficient"},"content":{"rendered":"\n<p>Next.js, the popular web application development framework, has recently announced the release of its latest version: <strong>Next.js 14<\/strong>. During the fourth annual Vercel conference, the Next.js developers presented a series of improvements and new features that promise to make the framework even more powerful and user-friendly.<\/p>\n\n\n\n<p>Unlike previous versions that focused on adding new APIs, Next.js 14 <strong>distinguishes itself by its dedication to refining existing tools,<\/strong> providing developers with a more efficient and intuitive solution for building modern web projects.<\/p>\n\n\n\n<p>In this article, we&#8217;ll explore all the significant features of this new version of the full-stack framework built on React, examining the motivations behind their introduction and how we can implement them in our applications.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong><em>Recommended video: Let&#8217;s build a Modern react application<\/em>!<\/strong><\/p>\n\n\n\n<p>[jwp-video n=&#8221;1&#8243;]<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-turbopack-a-turbo-compiler-for-next-js\">Turbopack: A Turbo Compiler for Next.js<\/h2>\n\n\n\n<p>One of the most significant additions in Next.js 14 is the introduction of Turbopack, an innovative compiler that replaces Webpack. Built on the Rust programming language, this new system promises to revolutionize the development process with local server startup times 53.3% faster and code updates 94.7% faster, thanks to Fast Refresh. Turbopack is a substantial leap forward in local <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-web-performance-optimization\/\" target=\"_blank\" aria-label=\"development performance (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">development performance<\/a>, providing tangible speed and reliability benefits.<\/p>\n\n\n\n<p>To test Turbopack immediately:<\/p>\n\n\n\n<p>Ensure you have version 14 of Next.js in your project. You can update it by modifying the dependency in your package.json file and then running <code>npm install<\/code> or <code>yarn install<\/code>.<\/p>\n\n\n\n<p>In some versions of Next.js 14, Turbopack might not be enabled by default. If necessary, you can enable it by adding a flag to your start command. For example, you could modify your dev script in package.json from &#8220;dev&#8221;: &#8220;next dev&#8221; to &#8220;dev&#8221;: &#8220;next dev &#8211;turbo&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-server-actions-simplifying-data-mutations\">Server Actions: Simplifying Data Mutations<\/h2>\n\n\n\n<p>Next.js 14 introduces Server Actions as a stable feature, simplifying web application development significantly. <strong>Server Actions<\/strong> allow you to define functions executed on the server that can be invoked directly by React components on the client side. This approach makes data mutations easier, <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/web-accessibility-guide\/\" target=\"_blank\" aria-label=\"enhancing the user experience (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">enhancing the user experience<\/a> in scenarios with slow connections or less powerful devices. Developers can now implement server-side features more intuitively, reducing code complexity and improving efficiency.<\/p>\n\n\n\n<p>Server Actions are deeply integrated into the entire App Router model. You can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Revalidate cached data with <code>revalidatePath()<\/code> or <code>revalidateTag()<\/code>.<\/li>\n\n\n\n<li>Redirect to different routes using <code>redirect()<\/code>.<\/li>\n\n\n\n<li>Set and read cookies through <code>cookies()<\/code>.<\/li>\n\n\n\n<li>Handle optimistic UI updates with <code>useOptimistic()<\/code>.<\/li>\n\n\n\n<li>Capture and display server errors with <code>useFormState()<\/code>.<\/li>\n\n\n\n<li>Show loading states on the client with <code>useFormStatus()<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Here&#8217;s an example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">```javascript\n<span class=\"hljs-comment\">\/\/ app\/page.tsx<\/span>\nexport <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Page<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\nasync <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createItem<\/span><span class=\"hljs-params\">(formData)<\/span> <\/span>{\n<span class=\"hljs-string\">'use server'<\/span>;\n<span class=\"hljs-comment\">\/\/ Logic to create an item (e.g., save to the database)<\/span>\n<span class=\"hljs-keyword\">return<\/span> { success: <span class=\"hljs-keyword\">true<\/span> };\n}\n<span class=\"hljs-comment\">\/\/ Rest of the component\u2026<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the same component, you can now use this function directly to perform server-side actions, such as responding to a form submission:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Continued in app\/page.tsx<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Page<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleSubmit<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\nevent.preventDefault();\n<span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData(event.currentTarget);\n<span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> createItem(formData);\n<span class=\"hljs-keyword\">if<\/span> (result.success) {\n<span class=\"hljs-comment\">\/\/ Handle the success of the action<\/span>\n}\n}\n<span class=\"hljs-keyword\">return<\/span> (\n{<span class=\"hljs-comment\">\/* Form elements *\/<\/span>} Submit\n);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, the <code>createItem<\/code> function is executed on the server when the form is submitted. This approach allows handling server-side operations such as data saving or other backend processing efficiently and securely, directly within React components.<\/p>\n\n\n\n<p>Here&#8217;s an example of how you might structure a Next.js 14 component containing two forms, each interacting with different Server Actions using GET and POST methods:<\/p>\n\n\n\n<p><strong>Defining Server Actions in External Files:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ actions\/getData.js<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getData<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-string\">'use server'<\/span>;\n  <span class=\"hljs-comment\">\/\/ Logic to retrieve data (GET)<\/span>\n}\n\n<span class=\"hljs-comment\">\/\/ actions\/postData.js<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">postData<\/span>(<span class=\"hljs-params\">formData<\/span>) <\/span>{\n  <span class=\"hljs-string\">'use server'<\/span>;\n  <span class=\"hljs-comment\">\/\/ Logic to send data (POST)<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Creating the Component with Two Forms:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/page.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { getData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/actions\/getData'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { postData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/actions\/postData'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Page<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleGetSubmit<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n    event.preventDefault();\n    <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> getData();\n    <span class=\"hljs-comment\">\/\/ Handle the response<\/span>\n  }\n\n  <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handlePostSubmit<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n    event.preventDefault();\n    <span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData(event.currentTarget);\n    <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> postData(formData);\n    <span class=\"hljs-comment\">\/\/ Handle the response<\/span>\n  }\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleGetSubmit}<\/span>&gt;<\/span>\n        {\/* Form elements for GET *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Get Data<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handlePostSubmit}<\/span>&gt;<\/span>\n        {\/* Form elements for POST *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Post Data<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Partial Prerendering: Combining Static and Dynamic<\/h2>\n\n\n\n<p>Another experimental feature in Next.js 14 is Partial Prerendering. This function aims to combine the benefits of static site generation (SSG) and server-side rendering (SSR). Using React Suspense component boundaries, Partial Prerendering determines which parts of the application are static and which are dynamic. Static parts are prepared as HTML, while dynamic parts are updated only when necessary. This hybrid approach promises to simplify development by offering the performance of staticity with the flexibility of dynamic content.<\/p>\n\n\n\n<p>To implement Partial Prerendering in Next.js 14, you will use React Suspense features to define which parts of your application can be statically prerendered and which need to be loaded dynamically. Here&#8217;s an example:<\/p>\n\n\n\n<p>Use Suspense to define the dynamic parts of your component that should be loaded after the static shell is loaded:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/page.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> React, { Suspense } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> DynamicComponent = React.lazy(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-keyword\">import<\/span>(<span class=\"hljs-string\">'.\/DynamicComponent'<\/span>));\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Page<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Static Title<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Suspense<\/span> <span class=\"hljs-attr\">fallback<\/span>=<span class=\"hljs-string\">{<\/span>&lt;<span class=\"hljs-attr\">p<\/span>&gt;<\/span>Loading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>}&gt;\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">DynamicComponent<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Suspense<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Define the component that will be loaded dynamically:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ DynamicComponent.tsx<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">DynamicComponent<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Logic for the dynamic component<\/span>\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Dynamic Content<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>DynamicComponent<\/code> will be loaded dynamically, while the rest of the page (<code>&lt;h1&gt;Static Title&lt;\/h1&gt;<\/code>) will be statically prerendered. This approach combines the advantages of static page generation with the flexibility of dynamic rendering, improving performance and the user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Improvements to Metadata: Optimizing User Experience<\/h2>\n\n\n\n<p>Next.js 14 has introduced significant improvements in metadata management. This version separates blocking metadata from non-blocking metadata, ensuring that the initial page view is not slowed down by non-essential metadata. Optimized metadata management is crucial for a smooth user experience, avoiding issues such as page flickering or changes in element layout due to viewport or theme variations.<\/p>\n\n\n\n<p>Before your page&#8217;s content can be transmitted by the server, some crucial metadata related to the viewport, color scheme, and theme needs to be sent to the browser first. Ensuring that these meta tags are sent with the initial page content helps ensure a smooth user experience, preventing flickering due to theme color changes or layout shifts due to viewport changes.<\/p>\n\n\n\n<p>In Next.js 14, there is now a separation between blocking and non-blocking metadata. Only a small subset of metadata options is blocking, ensuring that non-blocking metadata does not prevent a partially prerendered page from serving the static shell.<\/p>\n\n\n\n<p>The following metadata options are now deprecated and will be removed from metadata in a future major version:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>viewport<\/code>: Sets the initial zoom and other viewport properties.<\/li>\n\n\n\n<li><code>colorScheme<\/code>: Sets supported modes (light\/dark) for the viewport.<\/li>\n\n\n\n<li><code>themeColor<\/code>: Sets the color of the border around the viewport.<\/li>\n<\/ul>\n\n\n\n<p>Starting from Next.js 14, there are new <code>viewport<\/code> and <code>generateViewport<\/code> options to replace these options. All other metadata options remain unchanged. You can start adopting these new APIs today, and the existing metadata options will continue to work.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong><em>Recommended video: Are we React-ing wrongly?<br><\/em><\/strong>[jwp-video n=&#8221;2&#8243;]<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js Learning Course: Updated Training and Resources<\/h2>\n\n\n\n<p>Recognizing the importance of education for developers, Next.js 14 comes with a new free learning course (<a href=\"https:\/\/nextjs.org\/learn\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Next.js Learn<\/a>). This course covers a wide range of topics, from the Next.js App Router to authentication, integration with Postgres databases, static and dynamic rendering, to partial prerendering. The course is designed to help developers understand and fully leverage the capabilities of the framework.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integration with Strapi and Vercel&#8217;s AI<\/h2>\n\n\n\n<p>The integration with Strapi, a headless CMS, is another notable aspect of Next.js 14. This collaboration allows you to build projects that leverage the features of both systems, offering functionalities such as full CRUD, authentication, registration, and middleware for protected paths. Additionally, Vercel has introduced a new SDK for AI, promoting the integration of artificial intelligence with web development and expanding possibilities for creating dynamic and personalized content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js and Artificial Intelligence<\/h2>\n\n\n\n<p>The integration of artificial intelligence into Next.js opens new frontiers in web development. With Vercel&#8217;s AI SDK, developers can leverage language models to create personalized user experiences and dynamic content. This integration is particularly interesting for applications that require a high degree of interactivity and customization, such as e-learning platforms, virtual assistants, and recommendation systems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Changes<\/h2>\n\n\n\n<p>Here is a series of other changes related to Next.js 14:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Change:<\/strong> The minimum Node.js version is now 18.17.<\/li>\n\n\n\n<li><strong>Change:<\/strong> Removed WASM target for the next-swc build (PR).<\/li>\n\n\n\n<li><strong>Change:<\/strong> Deprecated support for @next\/font in favor of next\/font (Codemod).<\/li>\n\n\n\n<li><strong>Change:<\/strong> Modified the import of ImageResponse from next\/server to next\/og (Codemod).<\/li>\n\n\n\n<li><strong>Change:<\/strong> The <code>next export<\/code> command is deprecated in favor of <code>output: 'export'<\/code>.<\/li>\n\n\n\n<li><strong>Deprecation:<\/strong> <code>onLoadingComplete<\/code> for next\/image is deprecated in favor of <code>onLoad<\/code>.<\/li>\n\n\n\n<li><strong>Deprecation:<\/strong> <code>domains<\/code> for next\/image is deprecated in favor of <code>remotePatterns<\/code>.<\/li>\n\n\n\n<li><strong>Feature:<\/strong> You can enable more detailed logging around the fetch cache (Documentation).<\/li>\n\n\n\n<li><strong>Improvement:<\/strong> Reduced function size by 80% for a basic create-next-app application.<\/li>\n\n\n\n<li><strong>Improvement:<\/strong> Improved memory handling when using the edge runtime in development.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Next.js 14 represents a significant step forward for the framework. Focusing on improving existing features rather than adding new ones, this version offers developers a sleeker, more efficient, and powerful experience. With Turbopack, Server Actions, Partial Prerendering, and integration with Strapi and artificial intelligence, Next.js 14 stands out as an ideal solution for developing modern and high-performance web applications. Developers now have an even more robust and versatile tool for creating innovative and effective web experiences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js, the popular web application development framework, has recently announced the release of its latest version: Next.js 14. During the fourth annual Vercel conference, the Next.js developers presented a series of improvements and new features that promise to make the framework even more powerful and user-friendly. Unlike previous versions that focused on adding new APIs,&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":17231,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[],"collections":[],"class_list":{"0":"post-25244","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Next.js 14: All You Need to Know!<\/title>\n<meta name=\"description\" content=\"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js 14: All the Innovations Making Deployment Simple and Efficient\" \/>\n<meta property=\"og:description\" content=\"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-04T14:01:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T15:33:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"3375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"Next.js 14: All the Innovations Making Deployment Simple and Efficient\",\"datePublished\":\"2024-01-04T14:01:51+00:00\",\"dateModified\":\"2024-01-10T15:33:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/\"},\"wordCount\":1330,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/\",\"name\":\"Next.js 14: All You Need to Know!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"datePublished\":\"2024-01-04T14:01:51+00:00\",\"dateModified\":\"2024-01-10T15:33:14+00:00\",\"description\":\"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"width\":6000,\"height\":3375,\"caption\":\"A Quick Guide To NextJS by Codemotion\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/next-js-14-all-the-innovations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Next.js 14: All the Innovations Making Deployment Simple and Efficient\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\\\/\\\/www.riccardodegni.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/riccardodegni\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/riccardo-degni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next.js 14: All You Need to Know!","description":"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.","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.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/","og_locale":"en_US","og_type":"article","og_title":"Next.js 14: All the Innovations Making Deployment Simple and Efficient","og_description":"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-01-04T14:01:51+00:00","article_modified_time":"2024-01-10T15:33:14+00:00","og_image":[{"width":6000,"height":3375,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","type":"image\/png"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"Next.js 14: All the Innovations Making Deployment Simple and Efficient","datePublished":"2024-01-04T14:01:51+00:00","dateModified":"2024-01-10T15:33:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/"},"wordCount":1330,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/","name":"Next.js 14: All You Need to Know!","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","datePublished":"2024-01-04T14:01:51+00:00","dateModified":"2024-01-10T15:33:14+00:00","description":"Explore the groundbreaking innovations of Next.js 14 in this article, unveiling enhanced performance, advanced dev tools, and seamless UX.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","width":6000,"height":3375,"caption":"A Quick Guide To NextJS by Codemotion"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/next-js-14-all-the-innovations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Next.js 14: All the Innovations Making Deployment Simple and Efficient"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x600.png","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png",6000,3375,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-2048x1152.png",2048,1152,true],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"Next.js, the popular web application development framework, has recently announced the release of its latest version: Next.js 14. During the fourth annual Vercel conference, the Next.js developers presented a series of improvements and new features that promise to make the framework even more powerful and user-friendly. Unlike previous versions that focused on adding new APIs,&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=25244"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25244\/revisions"}],"predecessor-version":[{"id":25302,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/25244\/revisions\/25302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/17231"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=25244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=25244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=25244"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=25244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}