{"id":108696,"date":"2024-01-10T11:41:12","date_gmt":"2024-01-10T16:41:12","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=108696"},"modified":"2024-01-10T11:41:13","modified_gmt":"2024-01-10T16:41:13","slug":"a-step-by-step-guide-to-installing-next-js","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/","title":{"rendered":"A Step-by-Step Guide to Installing Next.js"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538.png\" alt=\"A Step-by-Step Guide to Installing Next.js Hero Image\" class=\"wp-image-72642\"><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.inmotionhosting.com\/blog\/what-is-next-js\/\">Next.js<\/a>, the powerful React framework, has become a go-to choice for developers building modern web applications. If you\u2019re ready to dive into the world of Next.js, follow this step-by-step guide to get it installed on your machine.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#What-you-will-need\">What you will need<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#create-new-project\">Create a New Project <\/a><\/li>\n\n\n\n<li><a href=\"#navigate-project\">Navigate to Your Project<\/a><\/li>\n\n\n\n<li><a href=\"#run-project\">Run Your Next.js App<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#additional-steps\">Additional Steps (Optional)<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#Customizing-Your-Next.js-App\">Customizing Your Next.js App<\/a><\/li>\n\n\n\n<li><a href=\"#Deploying-Your-Next.js-App\">Deploying Your Next.js App<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-you-will-need\">What you will need:<\/h2>\n\n\n\n<p>Before we start, make sure you have Node.js and npm (Node Package Manager) installed. If not, you can download and install them from <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">nodejs.org<\/a>. You will also want a hosting plan. We would recommend sticking to a <a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\">VPS Hosting<\/a> plan or a <a href=\"https:\/\/www.inmotionhosting.com\/dedicated-servers\">Dedicated Server<\/a>, which will allow you to install additional software.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-new-project\">Step 1: Create a New Project<\/h3>\n\n\n\n<p>Open your terminal and run the following command to create a new Next.js project:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npx create-next-app my-next-app\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">npx<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">create<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">next<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">app<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">my<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">next<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">app<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"687\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-8.png\" alt=\"Screen shot of creating a new next.js project\" class=\"wp-image-108700\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-8.png 721w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-8-300x286.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This command utilizes npx, a tool for running npm packages, to create a new Next.js project named \u201cmy-next-app.\u201d Feel free to replace \u201cmy-next-app\u201d with your preferred project name.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigate-project\">Step 2: Navigate to Your Project<\/h3>\n\n\n\n<p>Change into the newly created project directory:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"cd my-next-app\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">cd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">my<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">next<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">app<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This step ensures that you are working within the project folder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"run-project\">Step 3: Run Your Next.js App<\/h3>\n\n\n\n<p>Now, it\u2019s time to start your Next.js application. Run the following command:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm run dev\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">run<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">dev<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"264\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-9.png\" alt=\"Screenshot of running next.js app\" class=\"wp-image-108701\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-9.png 480w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/image-9-300x165.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This command launches the development server, and you should see output indicating that your Next.js app is running.<br>Open your browser and navigate to http:\/\/localhost:3000 to see your Next.js app in action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Additional-steps\">Additional Steps (Optional)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Customizing-Your-Next.js-App\">Customizing Your Next.js App<\/h3>\n\n\n\n<p>Explore the project structure and start customizing your application. Next.js follows a convention-based approach, making it easy to understand and extend. You\u2019ll find pages in the pages directory, styles in the styles directory, and more.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Deploying-Your-Next.js-App\">Deploying Your Next.js App<\/h3>\n\n\n\n<p>When you\u2019re ready to share your masterpiece with the world, you can deploy your Next.js app to platforms like Vercel, Netlify, or any hosting service of your choice. The deployment process is usually straightforward, and many hosting providers have specific guides for Next.js projects.<\/p>\n\n\n<div class=\"jumbotron\" style=\"text-align:center;\">\r\n<p style=\"font-size: 20px;\"><strong>Scalable VPS Infrastructure, Fully Managed<\/strong><\/p>\r\n<p>When shared hosting can't handle your traffic, VPS delivers dedicated resources that scale with demand. Our team manages the technical complexity while you manage your business.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>NVMe Storage &nbsp;&nbsp; <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>High-Availability &nbsp;&nbsp; <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Ironclad Security &nbsp;&nbsp; <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Premium Support<\/p>\r\n<p><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/vps-hosting?mktgp=t&irgwc=1&affiliates=5001860&utm_campaign=Jumbotron&utm_source=supportcenter&utm_medium=cta&utm_term=vps-cta2\">VPS Hosting<\/a><\/p>\r\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\">\n\n\n\n<p>Congratulations! You\u2019ve successfully installed Next.js and created your first project. From here, the possibilities are vast, whether you\u2019re building a personal portfolio, a blog, or a sophisticated web application. Dive into the Next.js documentation for in-depth information on features, optimizatio<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js, the powerful React framework, has become a go-to choice for developers building modern web applications. If you&#8217;re ready to dive into the world of Next.js, follow this step-by-step guide to get it installed on your machine. What you will need: Before we start, make sure you have Node.js and npm (Node Package Manager) installed.<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\"> Read More ><\/a><\/p>\n","protected":false},"author":57027,"featured_media":108697,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4573],"tags":[],"class_list":["post-108696","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-next-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A Step-by-Step Guide to Installing Next.js | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.\" \/>\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.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Step-by-Step Guide to Installing Next.js | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T16:41:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T16:41:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nikki Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nikki Thomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\"},\"author\":{\"name\":\"Nikki Thomas\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/77da9c5bc358a7155cbedd16fa947819\"},\"headline\":\"A Step-by-Step Guide to Installing Next.js\",\"datePublished\":\"2024-01-10T16:41:12+00:00\",\"dateModified\":\"2024-01-10T16:41:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\"},\"wordCount\":407,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png\",\"articleSection\":[\"Next.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\",\"name\":\"A Step-by-Step Guide to Installing Next.js | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png\",\"datePublished\":\"2024-01-10T16:41:12+00:00\",\"dateModified\":\"2024-01-10T16:41:13+00:00\",\"description\":\"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png\",\"width\":1024,\"height\":538,\"caption\":\"A-Step-by-Step-Guide-to-Installing-Nextjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Step-by-Step Guide to Installing Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/77da9c5bc358a7155cbedd16fa947819\",\"name\":\"Nikki Thomas\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/nikkit\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Step-by-Step Guide to Installing Next.js | InMotion Hosting","description":"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.","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.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/","og_locale":"en_US","og_type":"article","og_title":"A Step-by-Step Guide to Installing Next.js | InMotion Hosting","og_description":"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2024-01-10T16:41:12+00:00","article_modified_time":"2024-01-10T16:41:13+00:00","og_image":[{"width":1024,"height":538,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","type":"image\/png"}],"author":"Nikki Thomas","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Nikki Thomas","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/"},"author":{"name":"Nikki Thomas","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/77da9c5bc358a7155cbedd16fa947819"},"headline":"A Step-by-Step Guide to Installing Next.js","datePublished":"2024-01-10T16:41:12+00:00","dateModified":"2024-01-10T16:41:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/"},"wordCount":407,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","articleSection":["Next.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/","name":"A Step-by-Step Guide to Installing Next.js | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","datePublished":"2024-01-10T16:41:12+00:00","dateModified":"2024-01-10T16:41:13+00:00","description":"Next.js has become a go-to choice for developers building web applications. Follow this guide to get it installed on your machine.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","width":1024,"height":538,"caption":"A-Step-by-Step-Guide-to-Installing-Nextjs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"A Step-by-Step Guide to Installing Next.js"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/77da9c5bc358a7155cbedd16fa947819","name":"Nikki Thomas","url":"https:\/\/www.inmotionhosting.com\/support\/author\/nikkit\/"}]}},"jetpack_featured_media_url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/01\/A-Step-by-Step-Guide-to-Installing-Nextjs-1024x538-1.png","jetpack_sharing_enabled":true,"primary_category":{"id":4573,"name":"Next.js","slug":"next-js","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/57027"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=108696"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108696\/revisions"}],"predecessor-version":[{"id":108702,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108696\/revisions\/108702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media\/108697"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=108696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=108696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=108696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}