{"id":17227,"date":"2022-03-11T09:06:00","date_gmt":"2022-03-11T08:06:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=17227"},"modified":"2023-10-27T12:46:50","modified_gmt":"2023-10-27T10:46:50","slug":"a-quick-guide-to-nextjs","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/","title":{"rendered":"A Quick Guide to NextJS"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-f8759499      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-nextjs-and-why-are-people-using-it\" class=\"uagb-toc-link__trigger\">What Is NextJS and Why Are People Using It?<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-does-nextjs-do-exactly\" class=\"uagb-toc-link__trigger\">What Does NextJS do Exactly?<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#how-to-install-nextjs\" class=\"uagb-toc-link__trigger\">How to Install NextJS<\/a><li class=\"uagb-toc__list\"><a href=\"#nextjs-or-gatsby\" class=\"uagb-toc-link__trigger\">NextJS or Gatsby<\/a><li class=\"uagb-toc__list\"><a href=\"#the-future-of-the-web-is-here\" class=\"uagb-toc-link__trigger\">The Future of the Web is Here<\/a><li class=\"uagb-toc__list\"><a href=\"#more-articles-about-this\" class=\"uagb-toc-link__trigger\">More articles about this<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-nextjs-and-why-are-people-using-it\"><strong>What Is NextJS and Why Are People Using It?<\/strong><\/h2>\n\n\n\n<p>The continual state of change that the internet has been under since it became widespread has made <strong>good web application development<\/strong> something of a moving target. Next.js is a front-end framework that aims to marry the world of <strong>UX and backend functionality<\/strong>, and achieves that goal with remarkable effectiveness.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>According to a survey by StackOverflow, NextJs is currently the 5th most loved framework.<\/p>\n<\/blockquote>\n\n\n\n<p>Web developers are constantly striving for the <strong>best mix of functionality and good user experience<\/strong>, one significant step forward in this area has been that of single-page applications (SPAs). These improved the user experience by removing the need to reload pages based on the user\u2019s input. Unfortunately, they weren\u2019t perfect, as the implementation meant that much of the content on the page was obscured from search engines. This was because the content was only visible after it was called on by a user action, which search engine web crawlers don\u2019t execute.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/react-project-cra-nextjs-gatsby\/\" target=\"_blank\" aria-label=\"Next.js Framework (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Next.js Framework<\/a> provides a way around this conflict with a ready-to-go solution for the server-side rendering (SSR) of React components. <strong>React components enable developers to essentially construct self-contained elements that manage their own state<\/strong>, not only allowing for the quick and easy re-use of code but also making it possible to make broad, sweeping changes to a website with very little effort.<\/p>\n\n\n\n<p>Rendering these React components on the server (as opposed to the client) has a number of benefits. Firstly, the <strong>page\u2019s load times appear much faster<\/strong>, ensuring the user experience is improved. Secondly, <strong>the resulting page is indexable and crawlable by search engines<\/strong>, so the site\u2019s visibility is not negatively affected by switching to React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-does-nextjs-do-exactly\"><strong>What Does NextJS do Exactly?<\/strong><\/h3>\n\n\n\n<p>As mentioned above, the problem with React components is that they can be slower to load and they are opaque to search engines. If you look at the code of a <strong>vanilla React page<\/strong>, it is essentially a collection of references that direct the client to a particular React component. The client then has to go retrieve those components and render them, which often leads to a perceptible wait.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-1024x576.jpg\" alt=\"reactive programming in distributed architecture\" class=\"wp-image-17073\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-1024x576.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-300x169.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-768x432.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-1536x864.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-896x504.jpg 896w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive-400x225.jpg 400w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/portada-reactive.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Next.js Framework provides a solution for the server-side rendering (SSR) of React components.<\/figcaption><\/figure>\n\n\n\n<p>Next.js allows for the rendering of these React components on the server <em>before<\/em> the page is sent to the client. The server will typically render these components more quickly than a client browser could and the result is delivered to the browser where Next.js takes care of the client-side aspect of any dynamic components. <strong>This also makes the resulting page crawlable because the React components have essentially been baked into the page<\/strong>\u2014the code of the component is there, rather than a reference to the component.<\/p>\n\n\n\n<p>Of course, the original source code with all the calls to various React components remains, so you will still benefit from being able to implement new features and make changes to existing ones with the same convenience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-install-nextjs\"><strong>How to Install NextJS<\/strong><\/h2>\n\n\n\n<p>If you have decided to take advantage of Next.js, the next step is obviously to install it. Please note that <strong>Next.js is compatible with Windows, MacOS, and Linux systems<\/strong>, and the specifics of some of the actions you will need to take will vary depending on the system you are using. For example, creating a new folder in Windows is different to creating a new folder in a headless Linux install.<\/p>\n\n\n\n<p>The first thing you need is the latest version of<a href=\"https:\/\/nodejs.org\/\"> Node.js<\/a>. This should make the <strong>npm<\/strong> command available in your command line environment of choice. If you struggle with the installation process, Node.js has detailed instructions on its website.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/node-js-g976716e04_1280-1024x512.png\" alt=\"\" class=\"wp-image-17237\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/node-js-g976716e04_1280-1024x512.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/node-js-g976716e04_1280-300x150.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/node-js-g976716e04_1280-768x384.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/node-js-g976716e04_1280.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>You need Node.js for getting started with Next.js<\/em><\/figcaption><\/figure>\n\n\n\n<p>Once you have Node.js installed, create a new folder somewhere on your computer to store your Next.js projects. You can call this folder whatever you like, though it would typically be called something like \u201cnextjs\u201d. Then create a folder inside there with the name of the project you plan to work on.<\/p>\n\n\n\n<p>Next, head into your command line environment\u2014if you haven\u2019t already\u2014and navigate to your new project folder. Once inside the project folder, you need to initialise it as a Node project by typing <strong>npm init -y<\/strong>. The npm command initialises a new Node project, while the -y argument tells it to use the default settings.<\/p>\n\n\n\n<p>Now it\u2019s time to install Next and React. From the same location, enter the command, <strong>npm install next react react-dom<\/strong>, which should leave you with three items in your project folder;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>package.json<\/li>\n\n\n\n<li>package-lock.json<\/li>\n\n\n\n<li>node-modules (folder)<\/li>\n<\/ul>\n\n\n\n<p>Once that\u2019s done, it\u2019s time to open your project folder in your editor of choice. If you don\u2019t have a preference or aren\u2019t sure what to use,<a href=\"https:\/\/code.visualstudio.com\/\"> VS Code<\/a> is a free, lightweight code editor that is available on Windows, Mac, and Linux.<\/p>\n\n\n\n<p>From your editor, open up the package.json file and scroll to the \u201cscripts\u201d variable. Replace the values like this;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"scripts\"<\/span>: {\n<span class=\"hljs-string\">\"dev\"<\/span>: <span class=\"hljs-string\">\"next\"<\/span>,\n<span class=\"hljs-string\">\"build\"<\/span>: <span class=\"hljs-string\">\"next build\"<\/span>,\n<span class=\"hljs-string\">\"start\"<\/span>: <span class=\"hljs-string\">\"next start\"<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will add the Next.js build commands that you will be using in your project.<\/p>\n\n\n\n<p>And that\u2019s it; you\u2019re ready to go! Your project is set up with Next.js installed and ready for you to start adding React components. Once you are ready to try your project out, you can open the terminal of your editor and run the command, <strong>npm run dev<\/strong>, which should make your app available through localhost on port 3000. Just navigate to <strong>localhost:3000<\/strong> in your browser of choice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nextjs-or-gatsby\"><strong>NextJS or Gatsby<\/strong><\/h2>\n\n\n\n<p>While Next.js has many advantages, it is far from the only player in the game. <strong>Gatsby.js<\/strong> is another popular framework, but which of them should you use? The answer, like many things in life, depends on your particular circumstances.<\/p>\n\n\n\n<p>Next.js relies on server-side functionality to operate\u2014the server must render the components before sending the page to the client. <strong>Gatsby, on the other hand, is entirely client-side<\/strong>, with all of the page generation being handled at <em>build-time<\/em> rather than runtime.<\/p>\n\n\n\n<p>In short, if you are running a static site, many of the advantages provided by Next.js will be wasted on it as there will be no call for dynamic content. <strong>For a more dynamic site, however, Next.js\u2019 implementation makes it more suitable<\/strong> thanks to the runtime build aspect of the framework.<\/p>\n\n\n\n<p>If you were to poll developers right now, there\u2019s a good chance you would find Gatsby coming out on top, but that balance has been shifting, and if<strong> Next.js hasn\u2019t already emerged as the framework of preference between these two, it seems sure to do so in the near future<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-future-of-the-web-is-here\"><strong>The Future of the Web is Here<\/strong><\/h2>\n\n\n\n<p>Regardless of <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/javascript-ultimate-guide\/\" target=\"_blank\" aria-label=\"which framework you prefer (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">which framework you prefer<\/a>, the trend in web development seems clear\u2014improved user experience without sacrificing the power of a strong backend implementation. <strong>Frameworks like NextJS are providing a much-needed bridge between these two historically disconnected aspects of web design and development<\/strong>, and their capabilities continue to grow in line with the underlying technologies that power them.<\/p>\n\n\n\n<p>With every feature and quality-of-life improvement that <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/5-javascript-frameworks-to-use-in-2022\/\" target=\"_blank\" aria-label=\"frameworks like this (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">frameworks like this<\/a> bring, the web becomes more stable, more future-proofed, and easier to maintain.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-more-articles-about-this\"><strong>More articles about this<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nextjs.org\/docs\/getting-started\" class=\"ek-link\">Next.js: Getting Started<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactjs.org\/\" class=\"ek-link\">React Website<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/flaviocopes.com\/how-to-install-nextjs\/\" class=\"ek-link\">How to Install Next.js<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.solutelabs.com\/blog\/gatsby-js-vs-next-js-which-one-to-choose-when\" class=\"ek-link\">Gatsby.js Vs Next.js<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gatsbyjs.com\/why-gatsby\/\" class=\"ek-link\">Why Gatsby?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/flutter-for-web-development-getting-started\/\" target=\"_blank\" aria-label=\"Getting started with Flutter (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Getting started with Flutter<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What Is NextJS and Why Are People Using It? The continual state of change that the internet has been under since it became widespread has made good web application development something of a moving target. Next.js is a front-end framework that aims to marry the world of UX and backend functionality, and achieves that goal&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":17231,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[9907,6236],"collections":[11388],"class_list":{"0":"post-17227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-frameworks","9":"tag-web-developer","10":"collections-codemotion-guides","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Guide to the NextJS Framework - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Quick Guide to NextJS\" \/>\n<meta property=\"og:description\" content=\"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-11T08:06:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T10:46:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"3375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"A Quick Guide to NextJS\",\"datePublished\":\"2022-03-11T08:06:00+00:00\",\"dateModified\":\"2023-10-27T10:46:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/\"},\"wordCount\":1242,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"keywords\":[\"Frameworks\",\"Web Developer\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/\",\"name\":\"A Guide to the NextJS Framework - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"datePublished\":\"2022-03-11T08:06:00+00:00\",\"dateModified\":\"2023-10-27T10:46:50+00:00\",\"description\":\"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png\",\"width\":6000,\"height\":3375,\"caption\":\"A Quick Guide To NextJS by Codemotion\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/a-quick-guide-to-nextjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Quick Guide to NextJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide to the NextJS Framework - Codemotion Magazine","description":"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"A Quick Guide to NextJS","og_description":"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-03-11T08:06:00+00:00","article_modified_time":"2023-10-27T10:46:50+00:00","og_image":[{"width":6000,"height":3375,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","type":"image\/png"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"A Quick Guide to NextJS","datePublished":"2022-03-11T08:06:00+00:00","dateModified":"2023-10-27T10:46:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/"},"wordCount":1242,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","keywords":["Frameworks","Web Developer"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/","name":"A Guide to the NextJS Framework - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","datePublished":"2022-03-11T08:06:00+00:00","dateModified":"2023-10-27T10:46:50+00:00","description":"Your essential guide to getting started with Next.js: best practices, key concepts, and tips to discover this framework","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png","width":6000,"height":3375,"caption":"A Quick Guide To NextJS by Codemotion"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"A Quick Guide to NextJS"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x600.png","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png",6000,3375,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-2048x1152.png",2048,1152,true],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80.png",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/825bc6f1-4341-43ee-9ebe-21dc27378f80-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"What Is NextJS and Why Are People Using It? The continual state of change that the internet has been under since it became widespread has made good web application development something of a moving target. Next.js is a front-end framework that aims to marry the world of UX and backend functionality, and achieves that goal&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=17227"}],"version-history":[{"count":10,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17227\/revisions"}],"predecessor-version":[{"id":20472,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17227\/revisions\/20472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/17231"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=17227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=17227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=17227"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=17227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}