{"id":550,"date":"2022-10-26T20:25:49","date_gmt":"2022-10-26T20:25:49","guid":{"rendered":"https:\/\/trangotech.com\/blog\/?p=550"},"modified":"2025-01-10T13:00:21","modified_gmt":"2025-01-10T13:00:21","slug":"next-js","status":"publish","type":"post","link":"https:\/\/trangotech.com\/blog\/next-js\/","title":{"rendered":"Next JS : The Game Changing Update"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table Of Contents<\/p>\n<\/div><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:\/\/trangotech.com\/blog\/next-js\/#Next-JS-The-Game-Changing-Update\" >Next JS  The Game Changing Update<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/trangotech.com\/blog\/next-js\/#Nextjs-13-Update-Features\" >Next.js 13 Update Features<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/trangotech.com\/blog\/next-js\/#How-to-install-Nextjs-To-Create-Your-Next-App\" >How to install Next.js To Create Your Next App<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Next-JS-The-Game-Changing-Update\"><\/span><strong>Next JS : The Game Changing Update<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Vercel&#8217;s Next.js is an open-source web development framework that allows React-based <a  href=\"https:\/\/application.trangotech.com\/web-application-development-company\/\" rel=\"dofollow\">web applications<\/a> to have server-side rendering and generate static websites. Next.js is a development environment where time spent getting things done leads to the ultimate efficient and functional applications that you have always dreamt of having.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next JS\u2019s authentication process is very straightforward and comes equipped with added encryption. Authentication verifies a user&#8217;s identity, whereas authorization limits what a user can access. Next JS supports a variety of <\/span><span style=\"font-weight: 400;\">authentication patterns<\/span><span style=\"font-weight: 400;\">, each designed for a specific use.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For more authentication you can check fork next.js official repo in your system<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the command line, navigate to the root directory of your project.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Initialize the local directory as a Git repository.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><code><span style=\"font-weight: 400;\">git init -b main<\/span><\/code><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stage and commit all the files in your project.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><code><span style=\"font-weight: 400;\">git add . &amp;&amp; git commit -m \"initial commit\"<\/span><\/code><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To create a repository for your project on GitHub, use the <\/span><span style=\"font-weight: 400;\">gh repo create<\/span><span style=\"font-weight: 400;\"> subcommand. When prompted, select Push an existing local repository to GitHub and enter the desired name for your repository. If you want your project to belong to an organization instead of your user account, specify the organization name and project name with <\/span><span style=\"font-weight: 400;\">organization-name\/project-name<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Follow the interactive prompts. To add the remote and push the repository, confirm yes when asked to add the remote and push the commits to the current branch.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Alternatively, to skip all the prompts, supply the path to the repository with the <\/span><span style=\"font-weight: 400;\">&#8211;source<\/span><span style=\"font-weight: 400;\"> flag and pass a visibility flag (<\/span><span style=\"font-weight: 400;\">&#8211;public<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&#8211;private<\/span><span style=\"font-weight: 400;\">, or <\/span><span style=\"font-weight: 400;\">&#8211;internal<\/span><span style=\"font-weight: 400;\">). For example, <\/span><span style=\"font-weight: 400;\">gh repo create &#8211;source=. &#8211;public<\/span><span style=\"font-weight: 400;\">. Specify a remote with the <\/span><span style=\"font-weight: 400;\">&#8211;remote<\/span><span style=\"font-weight: 400;\"> flag. To push your commits, pass the <\/span><span style=\"font-weight: 400;\">&#8211;push<\/span><span style=\"font-weight: 400;\"> flag. For more information about possible arguments, see the<\/span><a href=\"https:\/\/cli.github.com\/manual\/gh_repo_create\"> <span style=\"font-weight: 400;\">GitHub CLI manual<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/a><\/p>\n<p><em><b>Click here for <a  href=\"https:\/\/github.com\/nextauthjs\/next-auth\" rel=\"nofollow\">GitHub Repo<\/a><\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/em><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Next.js goes beyond the Next Framework by providing built-in universal web pack plugin and a mechanism for automatic code splitting. It ships with a modern toolchain that guarantees you get fast updates, scalability, and ease of use with no extra configuration required. We&#8217;re talking about:<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nextjs-13-Update-Features\"><\/span><b>Next.js 13 Update Features<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>1.<\/b><span style=\"font-weight: 400;\">\u00a0 \u00a0 <\/span><b>Powerful Routing &amp; Layout<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Next.js 13 added a new <\/span><a  href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/router\" rel=\"nofollow\"><span style=\"font-weight: 400;\">file-system-based router<\/span><\/a><span style=\"font-weight: 400;\"> built on top of React Server Components that supports layouts, nested routing, loading states, error handling, and other features. Next.js includes a file-system-based router that is based on the concept of pages.When a file is added to the pages directory, it becomes available as a route by default. Most common patterns can be defined using the files in the pages directory.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-553\" src=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-300x162.jpg\" alt=\"directory\/hiearchy of next js\" width=\"640\" height=\"346\" srcset=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-300x162.jpg 300w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-1024x554.jpg 1024w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-768x416.jpg 768w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-1536x831.jpg 1536w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-696x377.jpg 696w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker-1068x578.jpg 1068w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/ezgif.com-gif-maker.jpg 1600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><a  href=\"https:\/\/assets.vercel.com\/image\/upload\/f_auto,q_100,w_1600\/v1666568302\/nextjs-docs\/darkmode\/terminology-component-tree.png\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Source\u00a0<\/span><\/a><\/p>\n<p><b>Tree:<\/b><span style=\"font-weight: 400;\"> A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.<br \/>\n<\/span><b><\/b><\/p>\n<p><b>Subtree:<\/b><span style=\"font-weight: 400;\"> Part of a tree, starting at a new root (first) and ending at the leaves (last).<br \/>\n<\/span><b><\/b><\/p>\n<p><b>Root:<\/b><span style=\"font-weight: 400;\"> The first node in a tree or subtree such as a root layout.<\/span><\/p>\n<p><b>Leaf:<\/b><span style=\"font-weight: 400;\"> Nodes in a subtree that have no children such as the last segment in a URL path.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<h3><b>2.<\/b> <b>\u00a0\u00a0\u00a0Native Support For Custom fonts and images<\/b><b><\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Next.js 13 introduced a powerful new Image Component that ships less client-side JavaScript, is easier to extend and style, is more accessible by default requiring alt tags, and is aligned with the Web platform to use features such as native browser lazy loading.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">The Image component includes the following optimizations:<\/span><\/p>\n<p><b>Improved Performance:<\/b><span style=\"font-weight: 400;\"> Always serve images that are the correct size for each device, using modern image formats.<\/span><\/p>\n<p><b>Visual Stability:<\/b><span style=\"font-weight: 400;\"> Automatically prevent Cumulative Layout Shift.Images are only loaded when they enter the viewport, with optional blur-up placeholders,resulting in faster page loads.<\/span><\/p>\n<p><b>Asset Flexibility:<\/b><span style=\"font-weight: 400;\"> Image resizing on demand, even for images stored on remote servers.<\/span><\/p>\n<h3><b>3.\u00a0 \u00a0 More Powerful Native Server<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Next.js 13 introduced new ways to render your application. This page will help you understand the differences between rendering environments, strategies, runtimes, and how to opt into them.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">There are two environments where your application code can be rendered: the client and the server.The client is a user&#8217;s device&#8217;s browser that sends a request to a server for your application code. It then converts the server response into an interface with which the user can interact. Where the server is the computer in a data center that stores your application code, receives client requests, performs some computation, and returns an appropriate response.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-557\" src=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/eee-300x63.png\" alt=\"\" width=\"686\" height=\"144\" srcset=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/eee-300x63.png 300w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/eee-768x161.png 768w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/eee-696x146.png 696w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/eee.png 777w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<h3><b>4.\u00a0 \u00a0 Dynamic HTML Streaming<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Next.js 13 provides a new method for retrieving and managing data in your application. The API has been simplified in order to be compatible with React and the Web Platform. This means that earlier Next.js APIs like getServerSideProps, getStaticProps, and getInitialProps will not work in the new app directory. Instead, there is a single flexible method for fetching, caching, and revalidating data at the component level<\/span><b>.<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\">Obtaining Data Using Server Components<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We advocate collecting data from Server Components within the app. Server components always retrieve information from the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This has some advantages, including:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Server Components have direct access to backend data resources (e.g. databases, APIs) since they never run on the client.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Keeping critical information on the server makes it easier to keep your application secure. For instance, access tokens, API keys, and so on.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fetching and rendering take place in the same environment, decreasing the amount of back and forth between client and server and, ultimately, the amount of work done in the browser.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Instead of many individual requests on the client, a single round-trip can be used to perform multiple data grabs. Depending on your location, data retrieval may also occur closer to your data source.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How-to-install-Nextjs-To-Create-Your-Next-App\"><\/span><b style=\"color: #111111; font-family: Roboto, sans-serif; font-size: 22px;\">How to install Next.js To Create Your Next App<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Environment Configuration<\/b><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/h3>\n<p>Let\u2019s start by making sure your development environment is ready. Firstly install Node.js from here if you don\u2019t already have it. Node.js 10.13 or later is required for the development of project<\/p>\n<p>Install a proper integrated development environment for your app development such as visual studio code, android studio, or jet brain. The procedure may differ for different operating systems.<\/p>\n<p>To create a Next.js app, open your terminal, cd into the directory you\u2019d like to create the app in, and run the following command:<\/p>\n<p><code>npx create-next-app nextjs-blog \u2013use-npm \u2013example \u201c<a href=\"https:\/\/github.com\/vercel\/next-learn\/tree\/master\/basics\/learn-starter\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/vercel\/next-learn\/tree\/master\/basics\/learn-starter<\/a>\u201c<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-561\" src=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/dddd-300x59.png\" alt=\"command to create a next js app\" width=\"706\" height=\"139\" srcset=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/dddd-300x59.png 300w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/dddd-768x151.png 768w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/dddd-696x137.png 696w, https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/dddd.png 772w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/p>\n<h3><b>Run the development server<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You now have a new directory called <\/span><span style=\"font-weight: 400;\">nextjs-blog<\/span><span style=\"font-weight: 400;\">. Let\u2019s <\/span><span style=\"font-weight: 400;\">cd<\/span><span style=\"font-weight: 400;\"> into it:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><code><span style=\"font-weight: 400;\">cd<\/span><span style=\"font-weight: 400;\"> nextjs-blog<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">Then, run the following command:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><code><span style=\"font-weight: 400;\">npm<\/span><span style=\"font-weight: 400;\"> run dev<\/span><\/code><\/p>\n<h3><b><br \/>\n<\/b><b>Frequently ask questions about Next.js<\/b><b><\/b><\/h3>\n<table>\n<tbody>\n<tr>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What Next.js is used for?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Next.js is a JavaScript framework that allows you to create ultrafast and incredibly user-friendly static websites as well as React-based web applications.<\/span><\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Is Next JS better than React Native?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">NextJS-powered web apps are extremely quick. When compared to NextJS, web apps produced with ReactJS are slower. Next.js also does not require offline assistance.<\/span><\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Is Next JS a better backend or frontend?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Next.js is a full-stack framework that acts as a <\/span>front-end framework<span style=\"font-weight: 400;\"> that builds the interface of a website and also functions as a back-end framework that handles the rendering process and database management. This means that you don&#8217;t need to use two different frameworks to <a  href=\"https:\/\/trangotech.com\/blog\/build-a-website-like-ebay\/\" rel=\"dofollow\">build a website<\/a>.<\/span><\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Should you learn Next Js?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With the ever-growing digital world, it is imperative to stay with the times. New and improved technologies are being released each day and with the release of Next.Js, this further solidifies our claim. Use this opportunity to learn this framework inside &amp; out and get ahead of the competition because as soon as this framework gains traction, you\u2019ll be one of the few individuals skilled in the art of Next.Js.<\/span><\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Which database works with Next Js?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Firebase. Firebase supports the real-time NoSQL database for the <\/span><a  href=\"https:\/\/application.trangotech.com\/react-native-app-development\/\" rel=\"dofollow\"><span style=\"font-weight: 400;\">development of react native applications<\/span><\/a><span style=\"font-weight: 400;\">. It is chosen mainly for its offline data change and data synchronization practices.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Next JS : The Game Changing Update Vercel&#8217;s Next.js is an open-source web development framework that allows React-based web applications to have server-side rendering and generate static websites. Next.js is a development environment where time spent getting things done leads to the ultimate efficient and functional applications that you have always dreamt of having. Next [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":6547,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[450,45],"tags":[76,77,78,67,68],"class_list":["post-550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-mobile-application","tag-next-js-13","tag-next-js-update","tag-next-js-version","tag-next-js","tag-react-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.0 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Next JS : The Game Changing Update<\/title>\n<meta name=\"description\" content=\"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trangotech.com\/blog\/next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next JS : The Game Changing Update\" \/>\n<meta property=\"og:description\" content=\"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trangotech.com\/blog\/next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"TrangoTech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/trangotech\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-26T20:25:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-10T13:00:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"470\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Sharjeel Ahmed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TrangoTech\" \/>\n<meta name=\"twitter:site\" content=\"@TrangoTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sharjeel Ahmed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/\"},\"author\":{\"name\":\"Sharjeel Ahmed\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#\\\/schema\\\/person\\\/87d027da01fa5afd03ef89eb65b38164\"},\"headline\":\"Next JS : The Game Changing Update\",\"datePublished\":\"2022-10-26T20:25:49+00:00\",\"dateModified\":\"2025-01-10T13:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/\"},\"wordCount\":1277,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Next.-JS-1-1.webp\",\"keywords\":[\"next js 13\",\"next js update\",\"next js version\",\"next.js\",\"react.js\"],\"articleSection\":[\"All\",\"Mobile Application\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/\",\"name\":\"Next JS : The Game Changing Update\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Next.-JS-1-1.webp\",\"datePublished\":\"2022-10-26T20:25:49+00:00\",\"dateModified\":\"2025-01-10T13:00:21+00:00\",\"description\":\"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Next.-JS-1-1.webp\",\"contentUrl\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Next.-JS-1-1.webp\",\"width\":1000,\"height\":470},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/next-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Home\",\"item\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next JS : The Game Changing Update\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/\",\"name\":\"Trango Tech Blog\",\"description\":\"Connecting you with Mobile and Ecommerce Technology\",\"publisher\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#organization\"},\"alternateName\":\"trangotech.com\\\/blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#organization\",\"name\":\"Trango Tech\",\"alternateName\":\"trangotech.com\\\/blog\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/logo.png\",\"width\":548,\"height\":448,\"caption\":\"Trango Tech\"},\"image\":{\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/trangotech\",\"https:\\\/\\\/x.com\\\/TrangoTech\",\"https:\\\/\\\/www.instagram.com\\\/trango_tech\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/trangotech\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@trangotech\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/#\\\/schema\\\/person\\\/87d027da01fa5afd03ef89eb65b38164\",\"name\":\"Sharjeel Ahmed\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g\",\"caption\":\"Sharjeel Ahmed\"},\"description\":\"Sharjeel Ahmed is a passionate tech enthusiast and an expert in SEO and content strategies who thrives on exploring cutting-edge innovations in the app development world. With a rich background in software development and mobile app technology, he brings a fresh and insightful perspective to how technology intersects with everyday life. Sharjeel has dedicated his career to sharing his knowledge and experiences through engaging, informative articles that resonate with both tech novices and experts alike. His professional journey is marked by significant contributions to several high-profile app development projects, showcasing his expertise and commitment to excellence. Sharjeel's deep involvement with various mobile app development companies further highlights his industry knowledge and leadership.\",\"sameAs\":[\"https:\\\/\\\/application.trangotech.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sharjeel-ahmed7\\\/\"],\"jobTitle\":\"SEO Manager\",\"worksFor\":\"Sharjeel Ahmed\",\"url\":\"https:\\\/\\\/trangotech.com\\\/blog\\\/author\\\/sharjeel-ahmed\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next JS : The Game Changing Update","description":"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.","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:\/\/trangotech.com\/blog\/next-js\/","og_locale":"en_US","og_type":"article","og_title":"Next JS : The Game Changing Update","og_description":"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.","og_url":"https:\/\/trangotech.com\/blog\/next-js\/","og_site_name":"TrangoTech","article_publisher":"https:\/\/www.facebook.com\/trangotech","article_published_time":"2022-10-26T20:25:49+00:00","article_modified_time":"2025-01-10T13:00:21+00:00","og_image":[{"width":1000,"height":470,"url":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp","type":"image\/webp"}],"author":"Sharjeel Ahmed","twitter_card":"summary_large_image","twitter_creator":"@TrangoTech","twitter_site":"@TrangoTech","twitter_misc":{"Written by":"Sharjeel Ahmed","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/trangotech.com\/blog\/next-js\/#article","isPartOf":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/"},"author":{"name":"Sharjeel Ahmed","@id":"https:\/\/trangotech.com\/blog\/#\/schema\/person\/87d027da01fa5afd03ef89eb65b38164"},"headline":"Next JS : The Game Changing Update","datePublished":"2022-10-26T20:25:49+00:00","dateModified":"2025-01-10T13:00:21+00:00","mainEntityOfPage":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/"},"wordCount":1277,"commentCount":2,"publisher":{"@id":"https:\/\/trangotech.com\/blog\/#organization"},"image":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp","keywords":["next js 13","next js update","next js version","next.js","react.js"],"articleSection":["All","Mobile Application"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/trangotech.com\/blog\/next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/trangotech.com\/blog\/next-js\/","url":"https:\/\/trangotech.com\/blog\/next-js\/","name":"Next JS : The Game Changing Update","isPartOf":{"@id":"https:\/\/trangotech.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/#primaryimage"},"image":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp","datePublished":"2022-10-26T20:25:49+00:00","dateModified":"2025-01-10T13:00:21+00:00","description":"There\u2019s a new player on the field. Have you read about the Next Js update? Hurry up! Click now and get 3 steps ahead of your competition.","breadcrumb":{"@id":"https:\/\/trangotech.com\/blog\/next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trangotech.com\/blog\/next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trangotech.com\/blog\/next-js\/#primaryimage","url":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp","contentUrl":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2022\/10\/Next.-JS-1-1.webp","width":1000,"height":470},{"@type":"BreadcrumbList","@id":"https:\/\/trangotech.com\/blog\/next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/trangotech.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Next JS : The Game Changing Update"}]},{"@type":"WebSite","@id":"https:\/\/trangotech.com\/blog\/#website","url":"https:\/\/trangotech.com\/blog\/","name":"Trango Tech Blog","description":"Connecting you with Mobile and Ecommerce Technology","publisher":{"@id":"https:\/\/trangotech.com\/blog\/#organization"},"alternateName":"trangotech.com\/blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trangotech.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/trangotech.com\/blog\/#organization","name":"Trango Tech","alternateName":"trangotech.com\/blog","url":"https:\/\/trangotech.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trangotech.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2023\/01\/logo.png","contentUrl":"https:\/\/trangotech.com\/blog\/wp-content\/uploads\/2023\/01\/logo.png","width":548,"height":448,"caption":"Trango Tech"},"image":{"@id":"https:\/\/trangotech.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/trangotech","https:\/\/x.com\/TrangoTech","https:\/\/www.instagram.com\/trango_tech\/","https:\/\/www.linkedin.com\/company\/trangotech\/","https:\/\/www.youtube.com\/@trangotech"]},{"@type":"Person","@id":"https:\/\/trangotech.com\/blog\/#\/schema\/person\/87d027da01fa5afd03ef89eb65b38164","name":"Sharjeel Ahmed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f82aebf27322b942dfc49e6b5228acf0d4ead47c2451ca6be201cfbd48ecdaa?s=96&d=mm&r=g","caption":"Sharjeel Ahmed"},"description":"Sharjeel Ahmed is a passionate tech enthusiast and an expert in SEO and content strategies who thrives on exploring cutting-edge innovations in the app development world. With a rich background in software development and mobile app technology, he brings a fresh and insightful perspective to how technology intersects with everyday life. Sharjeel has dedicated his career to sharing his knowledge and experiences through engaging, informative articles that resonate with both tech novices and experts alike. His professional journey is marked by significant contributions to several high-profile app development projects, showcasing his expertise and commitment to excellence. Sharjeel's deep involvement with various mobile app development companies further highlights his industry knowledge and leadership.","sameAs":["https:\/\/application.trangotech.com\/","https:\/\/www.linkedin.com\/in\/sharjeel-ahmed7\/"],"jobTitle":"SEO Manager","worksFor":"Sharjeel Ahmed","url":"https:\/\/trangotech.com\/blog\/author\/sharjeel-ahmed\/"}]}},"_links":{"self":[{"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/posts\/550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/comments?post=550"}],"version-history":[{"count":23,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/posts\/550\/revisions"}],"predecessor-version":[{"id":11255,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/posts\/550\/revisions\/11255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/media\/6547"}],"wp:attachment":[{"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/media?parent=550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/categories?post=550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trangotech.com\/blog\/wp-json\/wp\/v2\/tags?post=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}