{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/deploying-nextjs-app-on-vercel/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"471c9b58-1a68-52ce-aa8c-171a232aef92","excerpt":"In this tutorial iam gonna explain you how you can deploy you next js application to vercel Step 1: Set your environment variable Create environment variable…","html":"<p>In this tutorial iam gonna explain you how you can deploy you next js application to vercel</p>\n<h4>Step 1: Set your environment variable</h4>\n<p>Create environment variable files in root path of the project and define your environment variable for example</p>\n<ul>\n<li>.env.local - File used to define environment variable for local development</li>\n<li>.env.production - File used to define environment variable for production</li>\n</ul>\n<h4>Step 2: Create production build of your next js application</h4>\n<p>Create production build using following command</p>\n<pre><code class=\"language-js\">npm run build\n</code></pre>\n<h4>Step 3: Push the code to your github or gitlab or bitbucket account</h4>\n<p>Push your code in a repo to either gitlab or github or bitbucket</p>\n<pre><code class=\"language-js\">git add .\ngit commit -m \"Initial commit\"\ngit push\n</code></pre>\n<h4>Step 4: SignIn or signup to vercel through your github or gitlab or bitbucket account</h4>\n<p>You need to signup or signin through your github or gitlab or bitbucket account on which you have pushed the code</p>\n<h4>Step 5: Add project on vercel</h4>\n<ul>\n<li>In order to add project we need to connect our github or gitlab or bitbucket account and repo as shown below in the image</li>\n</ul>\n<p><img src=\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Deplyoing-Nextjs-on-vercel-addproject-1.png\" alt=\"add-project\"></p>\n<ul>\n<li>\n<p>Once you click on add your github account you will be asked whether you want to share all the repo or specific repo</p>\n</li>\n<li>\n<p>Once you select the repo it will ask you to import then click on the repo which you want to import</p>\n</li>\n<li>\n<p>After import is done it will ask further detail like project name, environment variable, build command etc</p>\n</li>\n<li>\n<p>Once you are done filling the detail you can click on deploy and it will automatically deploy</p>\n</li>\n</ul>","fields":{"slug":"/deploying-nextjs-app-on-vercel/"},"frontmatter":{"title":"Deploying Next JS App on vercel","date":"June 15, 2022","description":"In this article i will explain you how you can deploy your next js application on vercel","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/nextjs-and-vercel.jpeg"}},"previous":{"fields":{"slug":"/create-gatsby-wordpress-portfolio-website/"},"frontmatter":{"title":"Create Gatsby and Wordpress portfolio website step by step","date":"June 06, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}},"next":{"fields":{"slug":"/deploying-react-app-to-firebase/"},"frontmatter":{"title":"Deploying react application to firebase","date":"June 30, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-to-firebase.jpeg"}}},"pageContext":{"id":"471c9b58-1a68-52ce-aa8c-171a232aef92","previousPostId":"01234bb6-dd89-55cf-9e13-d2f90c279338","nextPostId":"86b697c0-5c6d-5354-a352-a0f6e7e611c0"}},
    "staticQueryHashes": ["3860684146"]}