{"id":28974,"date":"2022-05-17T08:05:34","date_gmt":"2022-05-17T08:05:34","guid":{"rendered":"https:\/\/www.emizentech.com\/blog\/?p=28974"},"modified":"2023-01-05T11:03:04","modified_gmt":"2023-01-05T11:03:04","slug":"next-js","status":"publish","type":"post","link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html","title":{"rendered":"What is Next.js &amp; Why &amp; How To Use It in 2023?"},"content":{"rendered":"\n<p>Working on a modern JavaScript application with React is masterly until one detects a few issues with rendering all of the content on the client-side. Server rendering, also known as static pre-rendering, solves these issues. Next.Js is a React framework that allows the user to perform all things straightforwardly, but it&#8217;s not confined to that. It is advocated as a single-command, zero-configuration toolchain for React projects. It majorly involves designing attractive, highly dynamic, interactive, and performant Web applications for different platforms like Mac, Windows and Linux.&nbsp;<\/p>\n\n\n\n<p>But how exactly does the framework work? Let&#8217;s spend some time exploring what Next.js and React are and how they can help.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #007db2;color:#007db2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #007db2;color:#007db2\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#So_First_Up_What_is_Nextjs\" >So First Up, What is Next.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Rendering_Methods_in_Nextjs\" >Rendering Methods in Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#What_Can_You_Build_with_NextJs_and_When_to_Use_NextJs\" >What Can You Build with Next.Js and When to Use Next.Js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#NEXTJS_and_JAMSTACK\" >NEXT.JS and JAMSTACK<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Nextjs_Features\" >Next.js Features<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Static_Site_Generation_with_Nextjs\" >Static Site Generation with Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Convert_Your_App_Idea_Into_Reality\" >Convert Your App Idea Into Reality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Benefits_of_Nextjs\" >Benefits of Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Disadvantages_of_NextJS\" >Disadvantages of NextJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Is_Nextjs_Better_than_Gatsby\" >Is Next.js Better than Gatsby?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#How_to_Install_Nodejs_on_Windows\" >How to Install Node.js on Windows?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Steps_to_Install_and_Run_Nextjs_Application\" >Steps to Install and Run Next.js Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#How_to_Add_TypeScript_to_Nextjs\" >How to Add TypeScript to Next.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#How_to_add_Pages_and_Routes_to_your_nextjs_app\" >How to add Pages and Routes to your next.js app<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Links_and_Navigation\" >Links and Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#SEO_in_Nextjs\" >SEO in Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#API_Routes\" >API Routes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Request_Data_Client-side\" >Request Data Client-side<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Request_Data_Server-side\" >Request Data Server-side<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Nextjs_Examples\" >Next.js Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#You_Have_A_Vision\" >You Have A Vision<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Top_Next_JS_templates\" >Top Next JS templates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Where_Can_You_Learn_Nextjs\" >Where Can You Learn Next.js?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/next-js.html#Frequently_Asked_Questions_about_NextJs\" >Frequently Asked Questions about Next.Js<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"So_First_Up_What_is_Nextjs\"><\/span>So First Up, What is Next.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"697\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/what-is-nextjs-1024x697.png\" alt=\"what is nextjs\" class=\"wp-image-29234\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/what-is-nextjs-1024x697.png 1024w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/what-is-nextjs-300x204.png 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/what-is-nextjs-768x523.png 768w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/what-is-nextjs.png 1144w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next.js is a React framework that allows users to create single-page Javascript apps. This framework has various advantages for both clients&#8217; apps and the development team. As users,&nbsp; one can get increasingly irritated as our expectations are not met by websites and apps that take longer than milliseconds to load. Next.js is widespread and a fine choice for various reasons; most are speed and performance-related.<\/p>\n\n\n\n<p><strong>Core features:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rich User Experience&nbsp;<\/li><li>Great performance&nbsp;<\/li><li>Faster feature development<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Next.js in 100 Seconds \/\/ Plus Full Beginner&#039;s Tutorial\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/Sklc_fQBmcs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Rendering_Methods_in_Nextjs\"><\/span>Rendering Methods in Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Rendering is an unavoidable unit that allows the user to convert the code written in React into the HTML UI representation. Rendering can be done on the client and the server, and it can happen either before a request is made at build time or after each request is made at runtime.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">a. Server-side rendering (SSR)<\/h3>\n\n\n\n<p>SSR is an application&#8217;s ability that allows the developer to convert HTML files on the server into a fully rendered HTML client page. The core advantage of using SSR as a solution is that it allows the developer to use the same code to deliver a faster user experience while using custom data. SSR is capable of fetching data and pre-populate the web page with custom content while leveraging the reliable internet connection of the server. For instance, if the developer has one index.html file that needs to be delivered to the client,&nbsp; then there is a high possibility that the developer has one metadata type, most likely the homepage metadata. It won&#8217;t be contextualized when the developer wishes to share a different route. Therefore none of your routes will be displayed on other sites with pertinent user information (description and preview photo) that users would like to share with the world.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Client-Side VS Server-Side Rendering - Data Fetching with Next.js\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/f1rF9YKm1Ms?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">b. Pre-rendering<\/h3>\n\n\n\n<p>Pre-rendering works as an attractive alternative or a solution for mandatory servers used for universal apps that are either deterrent or overkill for a small application. In other words, Pre-rendering refers to the generation of HTML in advance on the server instead of being done by JavaScript on the user&#8217;s device. Some material from another page or site may be pre rendered when the user browses a web page in preparation for a user visiting it next. Because some of the page&#8217;s elements were rendered ahead of time, the new page loads swiftly.<\/p>\n\n\n\n<p>For example, if the browser allows it, the first web page in Google&#8217;s search results is always prerendered. Google assumes that the top result will be clicked, and therefore, it requests that the browser render that page.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">c. Deferred rendering (ISR)<\/h3>\n\n\n\n<p>Within the Next.js framework, deferred rendering is referred to as Incremental Static Regeneration (ISR), first implemented in version 9.4. It&#8217;s similar to prerendering; only the requested page isn&#8217;t rendered during the initial build; it&#8217;s rendered when a user requests it. Users will see the pre rendered version of the page until a new build takes place or until a specified cache timeout expires. ISR aims to reduce the amount of time it takes to build a large site by allowing the developer to postpone the creation of less-trafficked pages. It can also render pages based on user-generated content on a case-by-case basis.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Can_You_Build_with_NextJs_and_When_to_Use_NextJs\"><\/span>What Can You Build with Next.Js and When to Use Next.Js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>BY using Next.js, a user can build numerous digital products and interfaces such as:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>MVP (Minimum Viable Product):<\/strong> MVP is a product version that encompasses enough features to be used by the early customer and add validation to the product idea in the product development cycle. For instance, the MVP can assist the product team in altering and integrating products as early user feedback in the software industry.&nbsp;<\/li><li><strong>Jamstack websites:<\/strong> Jamstack is referred to as the new standard architecture in the web context. JAMstac is a modern web development architecture elicited from Markup (JAM), JavaScript, and APIs. JAMstack cannot be specified as a discrete technology; on the other hand, it is a&nbsp; <a href=\"https:\/\/multisitelocal.ezxdemo.com\/app-development-guide.html\">different technique for building apps<\/a> and websites.&nbsp;<\/li><li><strong>Web Portals:<\/strong> A portal is a web-based platform that gathers data from several sources into a single user interface and displays it to users in the most appropriate way for their situation. Simple web portals have grown into systems that enable digital customer experience efforts throughout time.&nbsp;<\/li><li><strong>Single web pages:<\/strong> A single-page website, sometimes known as a one-page website, is one that only has one HTML page. There are no extra pages like Contact Us, About, or Features page.<\/li><li><strong>Static websites:<\/strong> A static website (also known as a flat or stationary page) is displayed precisely as stored in a computer browser. It is made up of HTML-coded web pages kept on a web server. It does not change; it remains the same, or &#8220;static,&#8221; for all site visitors.<\/li><li>Web programming or database design are not required for a static website. Static websites are the most basic and easiest to design, making them ideal for small-scale sites. Maintaining many static pages can soon become a time-consuming and inefficient chore.<\/li><li><strong>SaaS products:<\/strong> SaaS products are internet software hosted by a central provider and allow access to all users, for instance, text expander. DropBox, Google Apps, and Canva are some of the prominent illustrations of SaaS products.&nbsp;&nbsp;<\/li><li><strong>eCommerce and retail websites:<\/strong> A website allows individuals to purchase and sell physical goods, services, and digital products online rather than at an actual store. A business can handle orders, receive payments, manage shipping and logistics, and provide customer care through an <a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/ecommerce-website-development-guide.html\">e-commerce website<\/a>.<\/li><li><strong>Dashboards:<\/strong> A dashboard is a visual representation or display of a user&#8217;s data. It provides links to valuable tools and critical information displayed on the website.&nbsp;<\/li><li><strong>Progressive web applications (PWA):<\/strong> <a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/progressive-web-apps-guide.html\">PWA<\/a> is a software application built using standard web technologies like Javascript and HTML.&nbsp;<\/li><li><strong>Interactive user interfaces:<\/strong> The user interface (UI) is the point of interaction and communication between humans and computers in a device. Display screens, keyboards, mice, and the appearance of a desktop are all examples of this. It can also refer to how a user interacts with a program or a website.&nbsp;<\/li><li><strong>Blog:<\/strong> A <a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/\">blog<\/a> is a reverse chronological online diary, regularly updated web page, or informational website that displays material in reverse chronological order, with the most recent posts at the top. It&#8217;s a platform where a writer or a group of authors may express their thoughts on a specific topic.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"NEXTJS_and_JAMSTACK\"><\/span>NEXT.JS and JAMSTACK<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Jamstack is a web architecture that aims to make the web more responsive, safe, and scalable. It builds on many tools and workflows that developers appreciate and helps them get the most out of their time. Pre-rendering and decoupling are essential principles that enable sites and applications to be provided with more certainty and reliability. Jamstack works with various static site generators like Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully, etc. Next.js is becoming one of the most popular React frameworks for creating Jamstack websites that are both fast and SEO-friendly. It works well with headless CMSes and eCommerce platforms to deliver exceptional performance and SEO benefits.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Headless WordPress at the Edge with Next.js &amp; the Jamstack | Colby Fayock\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/EQbol6toyeA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Headless WordPress at the Edge with Next.js &amp; the Jamstack<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nextjs_Features\"><\/span>Next.js Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Hot Code Reloading:<\/strong> When modifications in the code are saved, it automatically reloads the program.<\/li><li><strong>Automatic Code Splitting:<\/strong> This functionality bundles and serves each page with every import in the code. It signifies that no more code is loaded onto the website.<\/li><li><strong>Ecosystem Compatibility:<\/strong> JavaScript, Node, and react are compatible with the Next.js ecosystem.<\/li><li><strong>Server Rendering:<\/strong> Render react components on the server efficiently before delivering HTML to the client.&nbsp;&nbsp;<\/li><li><strong>Styled-JSX:<\/strong> Styled-JSX <code>styled-jsx<\/code> is a JavaScript extension that allows you to write CSS right into the code.<\/li><li><strong>Automatic Prefetching:<\/strong> Only links shown in the viewport are prefetched by Next.js, which uses the Intersection Observer API to detect them. Next.js also disables prefetching in case of a slow network connection or when the user has (Save-Data) on. Based on the following checks, it dynamically injects <code>&lt;link rel=\"preload\"&gt; <\/code> tags to download components for subsequent navigations. Next.js doesn&#8217;t execute JavaScript; it only fetches it. This prevents it from downloading any other stuff that the prefetched page may request until the user clicks on the link.&nbsp;<\/li><li><strong>Static Exports:<\/strong> The user can use <code>next export<\/code> to export Next. Js application to static HTML can be run without a Node. Js server.<\/li><li><strong>TypeScript Support:<\/strong> Next.js provided an integrated TypeScript experience out of the box.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Static_Site_Generation_with_Nextjs\"><\/span>Static Site Generation with Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"880\" height=\"495\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Static-Site-Generation-with-Next.js_.jpg\" alt=\"Static Site Generation with Next.js\" class=\"wp-image-29237\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Static-Site-Generation-with-Next.js_.jpg 880w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Static-Site-Generation-with-Next.js_-300x169.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Static-Site-Generation-with-Next.js_-768x432.jpg 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure>\n\n\n\n<p>Static websites are as old as the web. However, with the JavaScript rise, static sites gained friction in the market, making them more dynamic. Assembling and rendering a website or app at build time is a static generation. The result is a collection of static files that include the HTML file itself and assets such as JavaScript and CSS. As we know them, JavaScript-based web apps work by executing libraries like React or scripts in the browser at run time. When a browser receives a page, it usually consists of simple HTML with little content. The scripts are then loaded, allowing the material to be pulled into the page, referred to as hydration. Static Generation uses technologies like Next.js to render a page similar to how it would appear in the browser but at compile time. This allows us to serve the entire content on the initial load. The scripts still hydrate the page during this process, but ideally with fewer changes or no changes.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Next.js attempts to statically generate any pages out of the box, if possible. Next.js does this by detecting the process of data fetching developed by an app.&nbsp;<\/li><li>&nbsp;Next.js provides APIs like <code>getStaticProps<\/code> and <code>getServerSideProps<\/code> to fetch data depending on their usage in building the app for the user.&nbsp;<\/li><li>If the user uses <code>getStaticProps<\/code>, Next.js finds out the need for the server to render those pages.<\/li><li>&nbsp;Next.js will load any data when someone requests the page from the server, in conjunction with a deployment system like Vercel that will automatically handle server configuration.<\/li><li>After the app has been developed, Next.js provides the possibility to export the app as static files into a separate directory. However it does not do so by default.<\/li><li>The developer will build the app first, then execute the next export, which makes the app available as static files in the out directory by default.<\/li><\/ul>\n\n\n\n<div style=\"background-color:#ffdec7;text-align:center\" class=\"wp-block-genesis-blocks-gb-cta gb-block-cta\"><div class=\"gb-cta-content\"><h2 class=\"gb-cta-title gb-font-size-32\" style=\"color:#32373c\"><span class=\"ez-toc-section\" id=\"Convert_Your_App_Idea_Into_Reality\"><\/span>Convert Your App Idea Into Reality<span class=\"ez-toc-section-end\"><\/span><\/h2><div class=\"gb-cta-text gb-font-size-32\" style=\"color:#32373c\"><p><strong>Hire Next.Js &amp; Full Stack Developers<\/strong><\/p><\/div><\/div><div class=\"gb-cta-button\"><a href=\"https:\/\/multisitelocal.ezxdemo.com\/enqiry.html?utm_source=blog&amp;utm_medium=gb&amp;utm_campaign=nextjs\" target=\"_self\" rel=\"noopener noreferrer\" class=\"gb-button gb-button-shape-rounded gb-button-size-medium\" style=\"color:#ffffff;background-color:#000000\">Get Started<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Benefits_of_Nextjs\"><\/span>Benefits of Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">For Business Owners&nbsp;<\/h3>\n\n\n\n<p>We can undoubtedly state that every business wishes to <a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/ecommerce-conversion-rate-optimization.html\">improve its conversion rate<\/a>, which directly impacts sales. These businesses must employ new technologies to provide a truly unique user experience that caters to both current and potential clients. Next.JS assists them by allowing them complete control over the final design of their websites, online stores, applications, and other digital products. Furthermore, you are not restricted by themes or plugins specific to a particular <a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/large-business-ecommerce-platforms.html\">eCommerce platform<\/a> or Content Management System (CMS).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Adaptability and responsiveness:<\/strong> Next. js provides adjustable websites and applications as per the screen size of the device)<\/li><li>Short page load time and unique experience on-site.&nbsp;<\/li><li><strong>Data security:<\/strong> Static web pages built with NextJS have no direct access to the database, dependencies, user data, or other sensitive information. This assures the safety of the data.&nbsp;<\/li><li><strong>Faster time to market:<\/strong> NextJS is an excellent method to create an MVP as quickly as feasible, thanks to several predefined components. This development method allows you to collect feedback rapidly and make changes to your product without losing time or money.<\/li><li><strong>Fully omnichannel:<\/strong> NextJS-powered websites and applications work on any device, allowing you to offer your products and services across many channels.<\/li><li>Visitors and customers will be satisfied with the performance of NextJS websites and web apps because static websites are quick by nature.<\/li><li><strong>Support on-demand:<\/strong> As React and NextJS get more popular, so does the number of developers. As a result, it will be simple to identify an agency or freelancer to make any necessary revisions.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">For Marketers&nbsp;<\/h3>\n\n\n\n<p>In context to the benefits marketers acquire from Next.js. Some prominent advantages are increasing conversion rate, SEO efficiency, and organic traffic.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Higher conversion and sales numbers:<\/strong> Marketers benefit from NextJS because websites and online applications are quick, light, and easy to scan, all of which help improve Google rankings. As Google rankings rise, organic traffic increases, resulting in increased conversion and sales rates.&nbsp;<\/li><li><strong>Unique user experience:<\/strong> This advantage is more visible in the eCommerce industry where online stores where businesses are using NFT.js for creating differentiation and sustaining in a highly competitive global market.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">For Developers&nbsp;<\/h3>\n\n\n\n<p>Devs are incredibly zealous about reusable React components which cut cost and development time.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>CSS parser:<\/strong> CSS files can be imported from a JavaScript file by developers. New pares enhanced CSS handling and highlighted previously unrecognized issues.&nbsp;&nbsp;<\/li><li><strong>Fast refresh:<\/strong> Easily visible edits made on React components.&nbsp;&nbsp;<\/li><li><strong>Built-in Image Component and Automatic Image Optimization:<\/strong> This feature optimizes photos for you automatically. It now supports AVIF images, which are 20 percent smaller than WebP images.<\/li><li><strong>Community support:<\/strong> The number of contributors to NextJS is expanding in tandem with its popularity. Instead of starting from scratch, developers can use this to locate likely already existing solutions.&nbsp;<\/li><li><strong>Hybrid of server-side rendering SSR and static site generation SSG:<\/strong> Allows the user to prerender pages at request time or build time in a single project.&nbsp;<\/li><li><strong>Incremental Static Regeneration:<\/strong>&nbsp; It allows web developers to update existing sites in the background as traffic comes in by re-rendering them. Static content can become dynamic in this way.<\/li><li><strong>TypeScript support:<\/strong> automatic TypeScript configuration and compilation.<\/li><li><strong>Zero Config:<\/strong> NextJS handles compilation and bundling for you. In other words, it is built from the ground up to be productive.<\/li><li><strong>Data fetching:<\/strong> Depending on the app&#8217;s use case, several approaches of rendering content are used. This comprises both server-side rendering or static site creation for pre-rendering and incremental static regeneration for updating or producing content at runtime.<\/li><li><strong>API routes:<\/strong> As a Node.js serverless function, it&#8217;s simple to create an API endpoint.<\/li><li><strong>Code splitting:<\/strong> Split the code and serve components only when they&#8217;re needed to lower the size of your app&#8217;s first payload.<\/li><li><strong>Rust-based compiler SWC:<\/strong> SWC, a Rust-based compiler, converts and minifies JavaScript code for production. Next. js features a brand new Rust compiler that has optimized bundling and building, resulting in 3x quicker local refreshes and 5x faster production builds.<\/li><li><strong>Middleware:<\/strong> allows the user to run code before a request is completed, allowing the user to employ code over configuration. Users can modify request responses and redirect users from one route to another.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Disadvantages_of_NextJS\"><\/span>Disadvantages of NextJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Although NextJS is fast evolving and adding new features, it still has certain drawbacks and concerns, which are listed below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Cost of flexibility:<\/strong> Next JS has few built-in front pages, which forces the developer to build the entire front-end layer from scratch.<\/li><li><strong>Development and Management:<\/strong> If the user wants to use NextJS to establish an online store but doesn&#8217;t have an in-house development team, the user will then need a committed individual to oversee the development and management.<\/li><li><strong>Lack of a built-in state manager:<\/strong> In need of Redux, MobX, or anything similar, the user will need a state manager.<\/li><li><strong>The low number of plugins:<\/strong> Compared to other counterparts like Gatsby.js, the user can&#8217;t utilize as many easily adaptable plugins.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Is_Nextjs_Better_than_Gatsby\"><\/span>Is Next.js Better than Gatsby?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"BEST Framework for React JS (Gatsby vs Next.js)\" width=\"770\" height=\"433\" src=\"https:\/\/www.youtube.com\/embed\/c8_kEVCcQvg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>BEST Framework for React JS (Gatsby vs Next.js)<\/figcaption><\/figure>\n\n\n\n<p>Gatsby combines the best parts of React, GraphQL, and react-router to create a developer-friendly static site generator. Gatsby generates static HTML files that may load from a CDN. When Gatsby apps become too large or fetch enormous volumes of data, they are known to cause issues and delayed builds. Next.js is ideal if the app has more than 100K pages or will need to fetch enormous volumes of data (such as a store with many products with variants).&nbsp;<\/p>\n\n\n\n<p>Both are suitable options for server-side rendering but in two different options. The result using Gatsby is a static site generator without a server if the user aims to build the site. It is now necessary to deploy the development of the build process statically on Netlify or another static hosting site. Next.js provides a backend that can render a response to a request on the server-side, allowing users to develop dynamic websites on platforms that support Node.js. Next.js can generate a static site too, but we would not say it&#8217;s its primary use case.<\/p>\n\n\n\n<p>If the goal is to create a static site, one can face difficulty deciding, and Gatsby may have a superior ecosystem of plugins, including many for blogging.<\/p>\n\n\n\n<p>Gatsby is also heavily based on GraphQL, which can fulfill the needs depending on user options and requirements.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Install_Nodejs_on_Windows\"><\/span>How to Install Node.js on Windows?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To install Next.js, you need to install&nbsp;Node.js. <\/p>\n\n\n\n<p>Download the&nbsp;<a href=\"https:\/\/nodejs.org\/en\/#home-downloadhead\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Windows Installer<\/a>&nbsp;from the&nbsp;<a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">nodejs official<\/a>&nbsp;web site.<\/p>\n\n\n\n<p>Or here are the alternative method to install Node.Js<\/p>\n\n\n\n<p>Using&nbsp;<strong>Winget<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>winget install OpenJS.NodeJS\n# or for LTS\nwinget install OpenJS.NodeJS.LTS<\/code><\/pre>\n\n\n\n<p>Using&nbsp;<strong>Chocolatey<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cinst nodejs\n# or for full install with npm\ncinst nodejs.install<\/code><\/pre>\n\n\n\n<p>Using&nbsp;<strong>Scoop<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>scoop install nodejs<\/code><\/pre>\n\n\n\n<p>To ensure if Node.Js is installed properly run this command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>C:\\Users\\Admin&gt; node -v<\/code><\/pre>\n\n\n\n<p>Using <strong>create-next-app<\/strong><\/p>\n\n\n\n<p>Another way to get started with Nex.js is  with <code>create-next-app<\/code> . It is a CLI tool which will help you build a Nex.js application. To use this you have to install the npx_command bundle and this will help you execute Javascript commands. Use one of the following commands to get started.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest\n# or\nyarn create next-app\n# or\npnpm create next-app\n<\/code><\/pre>\n\n\n\n<p>The command requires the application name and creates a new folder with that name, then downloads all the packages required (<code>react<\/code>,&nbsp;<code>react-dom<\/code>,&nbsp;<code>next<\/code>), sets the&nbsp;<code>package.json<\/code>&nbsp;to:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"722\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/output-after-running-create-next-app-1024x722.jpg\" alt=\"output after running create next app\" class=\"wp-image-29213\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/output-after-running-create-next-app-1024x722.jpg 1024w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/output-after-running-create-next-app-300x212.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/output-after-running-create-next-app-768x542.jpg 768w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/output-after-running-create-next-app.jpg 1209w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can run the sample app with <code>npm run dev<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"830\" height=\"954\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/CLI-Nextjs-output.jpg\" alt=\"CLI Nextjs output\" class=\"wp-image-29214\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/CLI-Nextjs-output.jpg 830w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/CLI-Nextjs-output-261x300.jpg 261w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/CLI-Nextjs-output-768x883.jpg 768w\" sizes=\"(max-width: 830px) 100vw, 830px\" \/><\/figure>\n\n\n\n<p>You will get a result like this&nbsp;<strong>http: \/\/ localhost:3000:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"827\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/localhost-image-1024x827.jpg\" alt=\"localhost image\" class=\"wp-image-29215\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/localhost-image-1024x827.jpg 1024w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/localhost-image-300x242.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/localhost-image-768x620.jpg 768w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/localhost-image.jpg 1129w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Source: <a href=\"https:\/\/www.freecodecamp.org\/news\/the-next-js-handbook\/#next-js-vs-gatsby-vs-create-react-app\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">FreeCodeCamp<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Steps_to_Install_and_Run_Nextjs_Application\"><\/span>Steps to Install and Run Next.js Application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Step 1:<\/strong> You can get node.js from here. Run these commands in the terminal to confirm the installation.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node -v\nnpm -v<\/code><\/pre>\n\n\n\n<p><strong>Step 2:<\/strong> Now, create a folder for your project, navigate to it with your code editor, and run the following command on the terminal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init -y\nnpm install --save next react react-dom<\/code><\/pre>\n\n\n\n<p>add the following script in package.json file<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\"scripts\": {\n\t\"dev\": \"next\",\n\t\"build\": \"next build\",\n\t\"start\": \"next start\"\n}\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Step 3:<\/strong> Add a file index.js in page folder and add the following code inside it<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from'react';\nimport Link from'next\/link';\n\nexport default class extends React.Component {\n\trender() {\n\t\treturn ( {\n\t\t\n\t\t\/\/ This is Jsx contains HTML\n\t\t\/\/ code in Javascript}\n\t\t&lt;div&gt;\n\t\t\t&lt;h1&gt;Hello Emizentech&lt;\/h1&gt;\n\t\t\t{\n\t\t\t\t\/\/ This is Styled-jsx contains\n\t\t\t\t\/\/ CSS code in Javascript}\n\t\t\t\t&lt;style jsx&gt;{`\n\t\t\t\t\ta{\n\t\t\t\t\t\tcolor:grey;\n\t\t\t\t\t\ttext-decoration:none;\n\t\t\t\t\t}\n\t\t\t\t`}&lt;\/style&gt;\n\t\t\t}\n\t\t&lt;\/div&gt;\n\t\t)\n\t}\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Step 4:<\/strong> Start the application with npm start.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"244\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/app-output-of-npm-start.jpg\" alt=\"app output of npm start\" class=\"wp-image-29218\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/app-output-of-npm-start.jpg 558w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/app-output-of-npm-start-300x131.jpg 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"140\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Hello-Emizentech.jpg\" alt=\"Hello Emizentech\" class=\"wp-image-29219\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Hello-Emizentech.jpg 539w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Hello-Emizentech-300x78.jpg 300w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_TypeScript_to_Nextjs\"><\/span>How to Add TypeScript to Next.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code># run 'touch' to create an empty config file\n# Next will auto-populate it\n\ntouch tsconfig.json \n\n# then you'll be prompted to run the command:\nnpm install -D typescript @types\/react @types\/node\n\n# now you can use TypeScript everywhere<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_add_Pages_and_Routes_to_your_nextjs_app\"><\/span>How to add Pages and Routes to your next.js app <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To add an about page to your app drop your component in \/pages\/about.js  or .tsx for TypeScript.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function About() {\n  return &lt;div&gt;About&lt;\/div&gt;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Links_and_Navigation\"><\/span>Links and Navigation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next framework also has a&nbsp;<code>Link<\/code>&nbsp;component from&nbsp;<code>next\/link<\/code>.<\/p>\n\n\n\n<p>If you want to link to the home page (\/) and a blog route (i.e. \/blog\/emizen), we would include the following in \/pages\/about.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Link from \"next\/link\";\n\nexport default function About() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;About Me&lt;\/h1&gt;\n      \n      &lt;div&gt;\n        &lt;Link href=\"\/\"&gt;\n          &lt;a&gt;Home&lt;\/a&gt;\n        &lt;\/Link&gt;\n        &lt;Link href=\"\/blog\/emizen\"&gt;\n          &lt;a&gt;Blog Post&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><code>href<\/code>&nbsp;is a required prop for the&nbsp;<code>Link<\/code>&nbsp;component &amp; the data can be passed to it as an object as well:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Link from \"next\/link\";\n\nexport default function About() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;About Me&lt;\/h1&gt;\n\n      &lt;div&gt;\n        &lt;Link href={{ pathname: \"\/about\" }}&gt;\n          &lt;a&gt;Home&lt;\/a&gt;\n        &lt;\/Link&gt;\n        &lt;Link\n          href={{\n            pathname: \"\/blog\/&#091;slug]\",\n            query: { slug: \"emizen\" },\n          }}\n        &gt;\n          &lt;a&gt;Blog Post&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"SEO_in_Nextjs\"><\/span>SEO in Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In Next, you can use the&nbsp;<code>Head<\/code>&nbsp;component from&nbsp;<code>next\/head<\/code>&nbsp;to add meta data to  webpages:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Link from \"next\/link\";\nimport Head from \"next\/head\";\n\nexport default function About() {\n  return (\n    &lt;div&gt;\n      &lt;Head&gt;\n      \t&lt;title&gt;About | IT Site&lt;\/title&gt;\n        &lt;meta name=\"description\" content=\"A website Emizentech\/&gt;\n      &lt;\/Head&gt;\n      \n      &lt;h1&gt;About Me&lt;\/h1&gt;\n      &lt;div&gt;\n        &lt;Link href=\"\/\"&gt;\n          &lt;a&gt;Home&lt;\/a&gt;\n        &lt;\/Link&gt;\n        &lt;Link href=\"\/blog\/emizen\"&gt;\n          &lt;a&gt;Blog Post&lt;\/a&gt;\n        &lt;\/Link&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"API_Routes\"><\/span>API Routes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nextjs allows&nbsp;creating full-stack React apps by&nbsp;writing&nbsp;server code via a feature called API routes.<br>To create your own API that is executed as separate serverless functions, create a folder called &#8220;api&#8221; in \/pages.<\/p>\n\n\n\n<p>If you&nbsp;want&nbsp;to get data from \/api\/about for the&nbsp;about page, include a page called about.js in \/pages\/api<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ syntax is very similar to the \"Express\" Node.js framework\n\n\/\/ here we are responding to every request with an OK (200) code and sending JSON data back (our name)\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: \"Reed Barger\" });\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Request_Data_Client-side\"><\/span>Request Data Client-side<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To request data from our API routes the conventional approach would be to request it using&nbsp;<code>useEffect<\/code>&nbsp;and&nbsp;<code>useState<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Link from \"next\/link\";\nimport { useEffect, useState } from \"react\";\n\nexport default function About() {\n  const &#091;data, setData] = useState(null);\n  const &#091;isLoading, setLoading] = useState(false);\n\n  useEffect(() =&gt; {\n    setLoading(true);\n    fetch(\"api\/about\")\n      .then((res) =&gt; res.json())\n      .then((data) =&gt; {\n        setData(data);\n        setLoading(false);\n      });\n  }, &#091;]);\n\n  if (isLoading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n  if (!data) return &lt;p&gt;No about data&lt;\/p&gt;;\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;My name is: {data.name}&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Request_Data_Server-side\"><\/span>Request Data Server-side<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These two functions helps to allow us to fetch data from the server.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>getServerSideProps\n#or\ngetStaticProps<\/code><\/pre>\n\n\n\n<p>The functions are in the same file as React components, and the code for them is bundled separately from the React client.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GetServerSideProps<\/h3>\n\n\n\n<p>Every page visit triggers the execution of <code>getServerSideProps<\/code>. As a result, it is extremely useful on pages that contain dynamic data or require requests to be performed every time, such as retrieving authenticated user data.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function About({ name }) {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;My name is: {name}&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport function getServerSideProps() {\n  return {\n    props: { name: \"Vivek Khatri\" },\n  };\n}<\/code><\/pre>\n\n\n\n<p>This function it allows to send data from the server and inject it into the props of page component.<\/p>\n\n\n\n<p>It allows React client to display the data immediately, with no delay, and without having to deal with any loading or error states.<\/p>\n\n\n\n<p>If you want to retrieve data from the server, you could use the <code>getServerSideProps<\/code>&nbsp;async with the&nbsp;<code>async<\/code>&nbsp;keyword.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function About({ name }) {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;My name is: {name}&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport async function getServerSideProps() {\n  const data = await fetch(\"https:\/\/xyz.com\/api\").then((res) =&gt;\n    res.json()\n  );\n\n  return {\n    props: { name: data.results&#091;0].name.first },\n  };\n}<\/code><\/pre>\n\n\n\n<p>We are dynamically retrieving data from the XYZ API, and the data changes with each page refresh.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GetStaticProps<\/h3>\n\n\n\n<p><code>getStaticProps<\/code> function is better for static pages that change infrequently. This function runs server code and sends a GET request to the server, but only once when the project is complete.<\/p>\n\n\n\n<p>When the app is run in development, it requests data every time it refresh the page, similar to getServerSideProps.<\/p>\n\n\n\n<p>During development, <code>getStaticProps<\/code> only makes requests on every page visit.<\/p>\n\n\n\n<p>If you run <code>yarn build<\/code> and then run the production build or your React project with <code>yarn start<\/code>, you will get the same name that was requested when the project was built, not at runtime.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"168\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/next-output-after-GetStaticProps-.jpg\" alt=\"next output after GetStaticProps\" class=\"wp-image-29226\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/next-output-after-GetStaticProps-.jpg 522w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/next-output-after-GetStaticProps--300x97.jpg 300w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/figure><\/div>\n\n\n\n<p><code>getServerSideProps<\/code> and <code>getStaticProps<\/code> can only make GET requests. API routes can handle any type of data read and update request (that is when combined with a data layer like a database)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nextjs_Examples\"><\/span>Next.js Examples<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Large Multi-user Websites&nbsp;<\/td><td>TikTok&nbsp;<br>Hashnode&nbsp;<br>Twitch mobile&nbsp;<\/td><\/tr><tr><td>Client-side Rendered Applications (SPA\/MPA)<\/td><td>Hulu&nbsp;<br>Binance<br>Ticket Master&nbsp;<\/td><\/tr><tr><td>Big Ecommerce Websites<\/td><td>Deliveroo&nbsp;<br>AT&amp;T&nbsp;<br>TicketSwap&nbsp;<\/td><\/tr><tr><td>Web Portals<\/td><td>PlayStation Competition Center<br>Realtor&nbsp;<br>Marvel&nbsp;<\/td><\/tr><tr><td>B2B And SAAS Websites<\/td><td>Typeform&nbsp;<br>InVision&nbsp;<br>Pusher&nbsp;<\/td><\/tr><tr><td>Finance Websites&nbsp;<\/td><td>SumUp&nbsp;<br>Verge&nbsp;<br>Nubank&nbsp;<\/td><\/tr><\/tbody><\/table><figcaption><a href=\"https:\/\/nextjs.org\/showcase\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Nextjs Showcase<\/a><\/figcaption><\/figure>\n\n\n\n<p>You can find more <a href=\"https:\/\/nextjs.org\/examples\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js examples here<\/a><\/p>\n\n\n\n<div style=\"background-color:#c3e9ff;text-align:center\" class=\"wp-block-genesis-blocks-gb-cta gb-block-cta\"><div class=\"gb-cta-content\"><h2 class=\"gb-cta-title gb-font-size-32\" style=\"color:#32373c\"><span class=\"ez-toc-section\" id=\"You_Have_A_Vision\"><\/span>You Have A Vision<span class=\"ez-toc-section-end\"><\/span><\/h2><div class=\"gb-cta-text gb-font-size-32\" style=\"color:#32373c\"><p><strong>We Have The Means To Get You There<\/strong><\/p><\/div><\/div><div class=\"gb-cta-button\"><a href=\"https:\/\/multisitelocal.ezxdemo.com\/enqiry.html?utm_source=blog&amp;utm_medium=gb&amp;utm_campaign=nextjs\" target=\"_self\" rel=\"noopener noreferrer\" class=\"gb-button gb-button-shape-rounded gb-button-size-medium\" style=\"color:#ffffff;background-color:#000000\">Find Out More<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Top_Next_JS_templates\"><\/span>Top Next JS templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Material Dashboard&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Dashboard-nextjs.jpg\" alt=\"Material Dashboard\u00a0nextjs\" class=\"wp-image-29231\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Dashboard-nextjs.jpg 800w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Dashboard-nextjs-300x225.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Dashboard-nextjs-768x576.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>NextJS Material is an open-source Material-UI React Dashboard inspired by Google&#8217;s Material Design. Material principles are a set of simple and elegant components. The popular Material-UI, NextJS, and React frameworks were used to create the NextJS Material Dashboard.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Material Kit&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Kit-nextjs.jpg\" alt=\"Material Kit nextjs\" class=\"wp-image-29230\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Kit-nextjs.jpg 800w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Kit-nextjs-300x225.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Material-Kit-nextjs-768x576.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>NextJS Material Kit is a Free Material Design Kit made for NextJS, React, and Material-UI. NextJS Material Kit contains over 100 individual frontend elements that allow the user to mix and match. Color variations are possible for all components, which the user can easily change with SASS and JSS (within JS files) files and classes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Argon<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Argon-nextjs.jpg\" alt=\"Argon nextjs\" class=\"wp-image-29229\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Argon-nextjs.jpg 800w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Argon-nextjs-300x225.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Argon-nextjs-768x576.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The NextJS Argon Dashboard comprises over 100 distinct components that the user can mix and match as you see fit. By modifying the SAAS files included with the project, the user can easily personalize this open-source React Dashboard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Notus&nbsp;<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs-1024x768.jpg\" alt=\"Notus nextjs\" class=\"wp-image-29228\" srcset=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs-1024x768.jpg 1024w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs-300x225.jpg 300w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs-768x576.jpg 768w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs-1536x1152.jpg 1536w, https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/Notus-nextjs.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Components with complete code Notus NextJS comprise over 100 distinct components that the user can mix and match as per the need. All components can have color variations, which you can easily change with Tailwind CSS classes.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Where_Can_You_Learn_Nextjs\"><\/span>Where Can You Learn Next.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>You can check the <a href=\"https:\/\/nextjs.org\/learn\/basics\/create-nextjs-app\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">official website to learn Next.js<\/a><\/li><li>Another option is <a href=\"https:\/\/www.freecodecamp.org\/news\/author\/reed\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Bootcamp<\/a><\/li><li><a href=\"https:\/\/www.udemy.com\/topic\/nextjs-p\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js on Udemy<\/a><\/li><\/ul>\n\n\n\n<p>and there are many more resources online that will help you master Next.js<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It doesn&#8217;t matter if you&#8217;re going to build robust, complex software that will serve millions of people or if you&#8217;re rapidly expanding on a web store. In both cases, you can use the advantages of modern web technology like Next.js to make your business more efficient online. SEO and UX Next.js&nbsp; will help you make the internet a better, cleaner, and more user-centric place to improve your page speed. Pages generated statically are still responsive: Next.js will hydrate your application on the client-side, allowing it to be fully interactive.&nbsp;<\/p>\n\n\n\n<p><strong>Looking for a talented <a href=\"https:\/\/multisitelocal.ezxdemo.com\/hire-full-stack-developers.html\">Next.js or full stack developer<\/a>? We&#8217;ve got your back! We provide all of the tools and expertise you&#8217;ll need to <a href=\"https:\/\/multisitelocal.ezxdemo.com\/enqiry.html?utm_source=blog&amp;utm_medium=gb&amp;utm_campaign=nextjs\">get started planning and executing your Next.js project right now<\/a>.&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frequently_Asked_Questions_about_NextJs\"><\/span>Frequently Asked Questions about Next.Js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n\n\n<div class=\"wp-block-genesis-blocks-gb-accordion gb-block-accordion\"><details><summary class=\"gb-accordion-title\"><strong>You might also like to read<\/strong><\/summary><div class=\"gb-accordion-text\">\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/node-js-complete-guide.html\">What is Node.Js? Why and How You Should Use It?<\/a><\/li><li><a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/vue-vs-angular.html\">Vue vs. Angular<\/a><\/li><li><a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/angular-vs-react.html\">Angular vs. React: Which Js Framework is Better?<\/a><\/li><li><a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/vue-vs-react.html\">Vue vs. React: What is The Best JS Framework?<\/a><\/li><li><a href=\"https:\/\/multisitelocal.ezxdemo.com\/blog\/cross-platform-app-development-frameworks.html\">Best Cross-Platform App Development Frameworks<\/a><\/li><\/ul>\n<\/div><\/details><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Working on a modern JavaScript application with React is masterly until one detects a few issues with rendering all of the content on the client-side. Server rendering, also known as static pre-rendering, solves these issues. Next.Js is a React framework that allows the user to perform all things straightforwardly, but it&#8217;s not confined to that.<\/p>\n","protected":false},"author":35,"featured_media":29235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[81],"tags":[],"class_list":{"0":"post-28974","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-mobile-app-development"},"modified_by":"Marketing EmizenTech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/The-React-Library-For-Your-Next-App-nextjs-600x400.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2022\/05\/The-React-Library-For-Your-Next-App-nextjs-600x600.jpg","author_info":{"display_name":"Amit Samsukha","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/amit"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/28974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=28974"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/28974\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/29235"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=28974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=28974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=28974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}