{"id":333253,"date":"2022-05-10T09:40:56","date_gmt":"2022-05-10T09:40:56","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=333253"},"modified":"2026-03-25T13:13:31","modified_gmt":"2026-03-25T13:13:31","slug":"how-to-create-next-app","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/","title":{"rendered":"How to create a Next.js App"},"content":{"rendered":"\n<p>Next.js is an open-source JavaScript framework by Vercel that enhances React apps with features like <a href=\"https:\/\/webkul.com\/blog\/getstaticprops-vs-getserversideprops-next-js-data-fetching\/\">server-side rendering<\/a> (SSR), static site generation (SSG), incremental static regeneration (ISR) and optimized performance for production.<\/p>\n\n\n\n<p>React is commonly used for Single-Page Web Applications with client-side rendering. Next.js enhances this by adding server-side rendering, route pre-fetching, TypeScript support and zero-config setup.<\/p>\n\n\n\n<p><strong>System Requirements<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>NodeJs 20.9 OR above<\/li>\n\n\n\n<li>MacOS, Windows (including WSL), and Linux are supported<\/li>\n\n\n\n<li>Supported browsers: Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Getting started with Create Next App<\/strong><\/h2>\n\n\n\n<p>Now, that we have some relevant context about creating a Next.js app, let\u2019s get started by installing it.<\/p>\n\n\n\n<p><strong>Quick Start (New in v16)<\/strong><\/p>\n\n\n\n<p>You can now skip all prompts and launch instantly using the <code>--yes<\/code> flag, which applies recommended defaults (TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack):<\/p>\n\n\n\n<p>npx create next-app@latest my-app &#8211;yes<br>cd my-app<br>npm run dev<\/p>\n\n\n\n<p><strong>Installation and Setup<\/strong><\/p>\n\n\n\n<p>To create a Next js app in the easiest way, open your terminal,&nbsp;<code>cd<\/code>&nbsp;into the directory you\u2019d like to create the app in, and run the following command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npx create-next-app@latest\n# or\nyarn create next-app\n# or\npnpm create next-app<\/pre>\n\n\n\n<p>It will prompt you with following questions in the command line, then proceed to create your Next.js app. After the installation is complete, we will verify that the app is working correctly.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">Need to install the following packages:\ncreate-next-app@16.2.1\nOk to proceed? (y) y<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">What is your project named? \u203a my-next-app<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use the recommended Next.js defaults? \u203a\n    Yes, use recommended defaults \u2014 TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md\n    No, reuse previous settings\n    No, customize settings \u2014 Choose your own preferences<\/pre>\n\n\n\n<p>If you choose <strong>&#8220;No, customize settings&#8221;<\/strong>, you will see the following individual prompts:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use TypeScript? \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Which linter would you like to use? \u203a ESLint \/ Biome \/ None<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use React Compiler? \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use Tailwind CSS? \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use src\/ directory? \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to use App Router? (recommended) \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to customize the default import alias (@\/*)? \u203a No \/ Yes<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">Would you like to include AGENTS.md to guide coding agents? \u203a No \/ Yes<\/pre>\n\n\n\n<p>After the installation:<\/p>\n\n\n\n<p>Run&nbsp;the&nbsp;below command to start the development server:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm run dev\n# or\nyarn dev\n#or\npnpm dev<\/pre>\n\n\n\n<p>Visit&nbsp;<code>http:\/\/localhost:3000<\/code>&nbsp;to view your application<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"584\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp\" alt=\"\" class=\"wp-image-532619\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-300x146.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-250x122.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-768x374.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1536x748.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs.webp 1919w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>You can edit either <code>src\/app\/page.tsx<\/code> or <code>src\/pages\/index.tsx<\/code>, depending on your selection for App Router, and instantly see the updated result in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"623\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-1200x623.webp\" alt=\"Result after making changes in Nextjs index page\" class=\"wp-image-465153\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-1200x623.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-300x156.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-250x130.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-768x399.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes-1536x797.webp 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/nextjs-with-changes.webp 1855w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now that we&#8217;ve created a Next.js app, we can integrate powerful tools to <a href=\"https:\/\/webkul.com\/blog\/project-setup-next-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">set up NextJs project <\/a>scalable, team-friendly for efficient collaboration and development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why use Create Next App?<\/h3>\n\n\n\n<p><code>create-next-app<\/code>&nbsp;allows us to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Interactive Experience<\/strong>: Running&nbsp;<code>npx create-next-app@latest<\/code>&nbsp;(with no arguments) launches an interactive experience that guides you through setting up a project.<\/li>\n\n\n\n<li><strong>Zero Dependencies<\/strong>: Initializing a project is as quick. Create Next App has zero dependencies.<\/li>\n\n\n\n<li><strong>Offline Support<\/strong>: Create Next App will automatically detect if you&#8217;re offline and bootstrap your project using your local package cache.<\/li>\n\n\n\n<li><strong>Support for Examples<\/strong>: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g.&nbsp;<code>npx create-next-app --example api-routes<\/code>).<\/li>\n\n\n\n<li><strong>Tested<\/strong>: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.<a href=\"https:\/\/nextjs.org\/docs\/api-reference\/create-next-app#related\"><\/a><\/li>\n\n\n\n<li><strong>Turbopack by Default<\/strong>: New in v16 \u2014 faster builds and Hot Module Replacement out of the box with zero configuration.<a href=\"https:\/\/nextjs.org\/docs\/api-reference\/create-next-app#related\"><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Data fetching methods in Next.js<\/strong><\/h2>\n\n\n\n<p>Next.js provides various ways to fetch data from an API or any other source. Next.js is well known to be a Full-Stack Framework.<\/p>\n\n\n\n<p>It lets us render content in various ways, like pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime using Incremental Static Regeneration. With the App Router (the default since v13 and now always recommended), data fetching happens directly inside Server Components using the native <code>fetch<\/code> API with Next.js caching extensions..<\/p>\n\n\n\n<p>Start your&nbsp;<a href=\"https:\/\/webkul.com\/nextjs-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js Headless Development<\/a>&nbsp;with Webkul.<\/p>\n\n\n\n<p>That\u2019s all about the create a next app. If you have any questions please comment below, and we will try to respond to you. Thanks \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js is an open-source JavaScript framework by Vercel that enhances React apps with features like server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR) and optimized performance for production. React is commonly used for Single-Page Web Applications with client-side rendering. Next.js enhances this by adding server-side rendering, route pre-fetching, TypeScript support and zero-config <a href=\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":377,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1173,9121],"tags":[12701,12572,12682],"class_list":["post-333253","post","type-post","status-publish","format-standard","hentry","category-api-2","category-magento-2","tag-create-next-app","tag-next-js","tag-nextjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create Next.js app<\/title>\n<meta name=\"description\" content=\"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Next.js app\" \/>\n<meta property=\"og:description\" content=\"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-10T09:40:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-25T13:13:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp\" \/>\n<meta name=\"author\" content=\"Rahul Chaudhary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul Chaudhary\" \/>\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:\/\/webkul.com\/blog\/how-to-create-next-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\"},\"author\":{\"name\":\"Rahul Chaudhary\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\"},\"headline\":\"How to create a Next.js App\",\"datePublished\":\"2022-05-10T09:40:56+00:00\",\"dateModified\":\"2026-03-25T13:13:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\"},\"wordCount\":575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp\",\"keywords\":[\"create next app\",\"Next.js\",\"nextjs\"],\"articleSection\":[\"API\",\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\",\"name\":\"How to create Next.js app\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp\",\"datePublished\":\"2022-05-10T09:40:56+00:00\",\"dateModified\":\"2026-03-25T13:13:31+00:00\",\"description\":\"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs.webp\",\"width\":1919,\"height\":934},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a Next.js App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\",\"name\":\"Rahul Chaudhary\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rahul Chaudhary\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Next.js app","description":"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.","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:\/\/webkul.com\/blog\/how-to-create-next-app\/","og_locale":"en_US","og_type":"article","og_title":"How to create Next.js app","og_description":"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.","og_url":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-10T09:40:56+00:00","article_modified_time":"2026-03-25T13:13:31+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp","type":"","width":"","height":""}],"author":"Rahul Chaudhary","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rahul Chaudhary","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/"},"author":{"name":"Rahul Chaudhary","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75"},"headline":"How to create a Next.js App","datePublished":"2022-05-10T09:40:56+00:00","dateModified":"2026-03-25T13:13:31+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/"},"wordCount":575,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp","keywords":["create next app","Next.js","nextjs"],"articleSection":["API","Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-next-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/","url":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/","name":"How to create Next.js app","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs-1200x584.webp","datePublished":"2022-05-10T09:40:56+00:00","dateModified":"2026-03-25T13:13:31+00:00","description":"Create Next.js app in easiest way with Next.js by using create-next-app . This CLI tool enables you to quickly start building a new Next.js app.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-next-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/nextjs.webp","width":1919,"height":934},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-next-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a Next.js App"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75","name":"Rahul Chaudhary","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rahul Chaudhary"},"url":"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/333253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=333253"}],"version-history":[{"count":21,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/333253\/revisions"}],"predecessor-version":[{"id":532621,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/333253\/revisions\/532621"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=333253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=333253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=333253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}