{"id":264,"date":"2019-07-07T08:58:25","date_gmt":"2019-07-07T08:58:25","guid":{"rendered":"https:\/\/blog.staginginstance.com\/?p=264"},"modified":"2019-07-07T09:03:03","modified_gmt":"2019-07-07T09:03:03","slug":"create-a-page-with-next-js-in-5-easy-steps","status":"publish","type":"post","link":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/","title":{"rendered":"Create a page with Next.js in 5 easy steps"},"content":{"rendered":"\n<p>Next.js is a Javascript based react framework.  And we all know how important javascript is. The&nbsp;<strong>importance<\/strong>&nbsp;of&nbsp;<strong>JavaScript<\/strong>&nbsp;as a web technology can be determined from the fact that it is currently used by 94.5% of all websites. As a client-side programming language,&nbsp;<strong>JavaScript<\/strong>&nbsp;helps web developers to make web pages dynamic and interactive by implementing custom client-side scripts, it helps you build apps faster, and faster apps too. Hence with the rapidly changing technical world, you need to adapt Javascript which brings us to Next.js.<\/p>\n\n\n\n<p>Next.js comes with many features on top of features React offers which are already included in the framework:<\/p>\n\n\n\n<ul><li>Server-rendered by default &#8211; You don&#8217;t have to render server again and again. Next.js takes care of it for you by default.<\/li><li>Code splitting is automatic to load page faster.<\/li><li>Client-side routing is simple and page based. Simply create a page(about.js) and your client-side route will be (\/client).<\/li><li>Webpack-based dev environment which supports&nbsp;<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/concepts\/hot-module-replacement\/\">Hot Module Replacement<\/a>(HMR). HMR detects changes in your code and refreshes the section which has changes without actually refreshing the whole page. Cool, right?<\/li><li>Able to implement with Express or any other Node.js HTTP server.<\/li><li>Customizable with your own Babel and Webpack configurations.<\/li><\/ul>\n\n\n\n<p>Next.js works the same in all OS (Windows, Linux, &amp; Mac). So let&#8217;s get on to the steps to create our page:<\/p>\n\n\n\n<ul><li>Install node.js. This is the first step. Need to have node.js installed globally on your system.<\/li><li>Open command line \/ terminal and navigate to your web root. Now we will run few commands to create our project folder, install packages such as react, next and create pages directory where project pages will reside. These are the commands you need to run, one after another: <br><code><strong>mkdir <\/strong>hello-world<br><strong>cd <\/strong>hello-world<br><strong>npm <\/strong>init -y<br><strong>npm <\/strong>install --save react react-dom next<br><strong>mkdir <\/strong>pages <\/code><\/li><li>At this point you will have a project folder with  next framework installed. Now go to your project folder, locate package.json,  open the &#8220;package.json&#8221; in the hello-world directory and add the following NPM script: <br><code>\"<strong>scripts<\/strong>\": {<br>    \"<strong>dev<\/strong>\": \"next\",<br>    \"<strong>build<\/strong>\": \"next build\",<br>    \"<strong>start<\/strong>\": \"next start\"<br>}<\/code><\/li><li>Now let&#8217;s create a file <code>index.js<\/code> in the pages folder we created couple of steps ago and add following code in it and save it:<br><code><strong>const <\/strong>Index = () =&gt; (<br>   &lt;div&gt;<br>     &lt;p&gt;Hello World!&lt;\/p&gt;<br>   &lt;\/div&gt;<br> );<br> <br><strong>export <\/strong>default Index;<\/code><\/li><li>Now final step run following command terminal: <code>npm run dev<\/code> and go to <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a><code><br><\/code><img decoding=\"async\" style=\"width: 100%;\" src=\"https:\/\/blog.staginginstance.com\/wp-content\/uploads\/2019\/07\/hello-world-nextjs.png\" alt=\"Hello World nextJs\"><\/li><\/ul>\n\n\n\n<p>You&#8217;ll see a page with &#8220;Hello World!&#8221;. Here we go, created a page in 5 easy steps.  Pretty easy, right? <\/p>\n\n\n\n<p>You can get into advanced stuff and build a full-fledged website using next.js in no time.  Here is the documentation for next.js:  <a href=\"https:\/\/nextjs.org\/docs\">https:\/\/nextjs.org\/docs<\/a> <\/p>\n\n\n\n<p>Author\u2019s GitHub Profile:&nbsp;<a href=\"https:\/\/github.com\/abhij89\">https:\/\/github.com\/abhij89<\/a><\/p>\n\n\n\n<p>Read Important Linux Commands:  <a href=\"https:\/\/blog.staginginstance.com\/important-linux-ubuntu-commands\/\">https:\/\/blog.staginginstance.com\/important-linux-ubuntu-commands\/<\/a> <br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js is a Javascript based react framework. And we all know how important javascript is. The&nbsp;importance&nbsp;of&nbsp;JavaScript&nbsp;as a web technology can be determined from the fact that it is currently used by 94.5% of all websites. As a client-side programming language,&nbsp;JavaScript&nbsp;helps web developers to make web pages dynamic and interactive by implementing custom client-side scripts, it&hellip; <a class=\"more-link\" href=\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\">Continue reading <span class=\"screen-reader-text\">Create a page with Next.js in 5 easy steps<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,30,29],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial - Create a page with Next.js in 5 easy steps<\/title>\n<meta name=\"description\" content=\"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial - Create a page with Next.js in 5 easy steps\" \/>\n<meta property=\"og:description\" content=\"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"Learner at life\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/abhij89\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-07T08:58:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-07T09:03:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/geekabhi.com\/blog\/wp-content\/uploads\/2019\/07\/hello-world-nextjs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1919\" \/>\n\t<meta property=\"og:image:height\" content=\"1028\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Abhishek Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Tutorial - Create a page with Next.js in 5 easy steps\" \/>\n<meta name=\"twitter:description\" content=\"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/geekabhi.com\/blog\/wp-content\/uploads\/2019\/07\/hello-world-nextjs.png\" \/>\n<meta name=\"twitter:creator\" content=\"@abhij89\" \/>\n<meta name=\"twitter:site\" content=\"@abhij89\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\",\"url\":\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\",\"name\":\"Tutorial - Create a page with Next.js in 5 easy steps\",\"isPartOf\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/#website\"},\"datePublished\":\"2019-07-07T08:58:25+00:00\",\"dateModified\":\"2019-07-07T09:03:03+00:00\",\"author\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e\"},\"description\":\"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/geekabhi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a page with Next.js in 5 easy steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#website\",\"url\":\"https:\/\/geekabhi.com\/blog\/\",\"name\":\"Learner at life\",\"description\":\"Blog to help you learn stuff\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/geekabhi.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e\",\"name\":\"Abhishek Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g\",\"caption\":\"Abhishek Jain\"},\"description\":\"Techie with 10+ years of experience and counting.\",\"sameAs\":[\"http:\/\/www.geekabhi.com\",\"https:\/\/twitter.com\/abhij89\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial - Create a page with Next.js in 5 easy steps","description":"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.","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:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial - Create a page with Next.js in 5 easy steps","og_description":"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.","og_url":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/","og_site_name":"Learner at life","article_publisher":"http:\/\/abhij89","article_published_time":"2019-07-07T08:58:25+00:00","article_modified_time":"2019-07-07T09:03:03+00:00","og_image":[{"width":1919,"height":1028,"url":"https:\/\/geekabhi.com\/blog\/wp-content\/uploads\/2019\/07\/hello-world-nextjs.png","type":"image\/png"}],"author":"Abhishek Jain","twitter_card":"summary_large_image","twitter_title":"Tutorial - Create a page with Next.js in 5 easy steps","twitter_description":"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.","twitter_image":"https:\/\/geekabhi.com\/blog\/wp-content\/uploads\/2019\/07\/hello-world-nextjs.png","twitter_creator":"@abhij89","twitter_site":"@abhij89","twitter_misc":{"Written by":"Abhishek Jain","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/","url":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/","name":"Tutorial - Create a page with Next.js in 5 easy steps","isPartOf":{"@id":"https:\/\/geekabhi.com\/blog\/#website"},"datePublished":"2019-07-07T08:58:25+00:00","dateModified":"2019-07-07T09:03:03+00:00","author":{"@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e"},"description":"A simple tutorial explaining how to create a basic page with Next.js (is a Javascript based react framework) in 5 easy steps.","breadcrumb":{"@id":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/geekabhi.com\/blog\/create-a-page-with-next-js-in-5-easy-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/geekabhi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a page with Next.js in 5 easy steps"}]},{"@type":"WebSite","@id":"https:\/\/geekabhi.com\/blog\/#website","url":"https:\/\/geekabhi.com\/blog\/","name":"Learner at life","description":"Blog to help you learn stuff","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/geekabhi.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e","name":"Abhishek Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g","caption":"Abhishek Jain"},"description":"Techie with 10+ years of experience and counting.","sameAs":["http:\/\/www.geekabhi.com","https:\/\/twitter.com\/abhij89"]}]}},"_links":{"self":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/264"}],"collection":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":4,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/264\/revisions\/269"}],"wp:attachment":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}