{
  "$type": "site.standard.document",
  "content": {
    "$type": "site.standard.content.markdown",
    "text": "import FYIBlock from \"../../components/FYIBlock.astro\";\n\n<FYIBlock type=\"warning\">\n\t<span slot=\"title\">Outdated</span>\n\t<div slot=\"body\">This post was written in October 2021 against Netlify CLI 6.14.5 and Next.js 12. The core concepts still hold, but some CLI output and configuration details may have changed. The Netlify docs are worth a check before following along.</div>\n</FYIBlock>\n\n## Clone repo\n\nPull down Cassidy Williams Next.js [Netlify Starter repo](https://github.com/cassidoo/next-netlify-starter). I've moved the contents of this - excluding the .git folder - into a seperate folder. Commit this repo to your github account, and add it to the Build Settings section in your Netlify account.\n\n### What's in the repo\n\nThis projects contains; 2 sample components, a global stylesheet, a `netlify.toml` for deployment (more on that later), and a `jsconfig.json` for setting up absolute imports and aliases. It also includes the [Essential Next.js Build Plugin](https://github.com/netlify/netlify-plugin-nextjs), which will allow for you to implement features like Preview Mode, server-side rendering/incremental static regeneration via Netlify Functions, and internationalized routing.\n\nYou can either do a \"one-click\" deploy from the github repo to push straight up to Netlify, or you can take the more challenging setup, which is what we are detailing today.\n\n## Install Netlify-CLI\n\nTo install Netlify CLI, make sure you have [Node.js](https://nodejs.org/en/download/) version 10 or later. For this post, I'm using the latest version of the CLI which at this time of writing is 6.14.5, and my node version is v14.17.0.\n\n`yarn add netlify-cli` or `npm install netlify-cli -g`\n\nAfter installation, check version and basic information by using the `netlify` command.\n\n<FYIBlock type=\"warning\">\n\t<span slot=\"title\">Global vs Local</span>\n\t<div slot=\"body\">Installing Netlify CLI globally means that your system always has the latest version, including any breaking changes. While global installation is appropriate for initial development and experimentation, for managing builds in a continuous integration (CI) environment, use <a href='https://docs.netlify.com/cli/get-started/#installation-in-a-ci-environment'>local CLI installation</a> instead.</div>\n</FYIBlock>\n\n### Authenticating with Netlify\n\nNetlify CLI will use an access token in order to authenticate with Netlify. This token can be generated two ways; through the CLI, or through the Netlify UI. We're going to authenticate via the CLI here, using this command;\n\n`netlify login`\n\nWhen this command is run, we are redirected in the browser to this page to authorize the application. A browser window will open prompting us to authorize the Netlify CLI application.\n\nOnce we have aquired an access token, we _should_ be able use one of the commands to push the contents of our folder to Netlify. Looking through the list of commands when we run `netlify` shows us that `deploy` would be the one to deploy the application, so let's try that!\n\n```bash\n$ netlify deploy\n\nThis folder isn't linked to a site yet.\n? What would you like to do?\n  Link this directory to an existing site\n❯ Create & configure a new site\n```\n\n`netlify deploy`\n\nOk, so we run it, and are given this back. Seems pretty straightforward. Let's just select 'Create & configure a new site'.\n\n```bash\n$ netlify deploy\n\nThis folder isn't linked to a site yet.\n? What would you like to do?\n  Link this directory to an existing site\n❯ Create & configure a new site\n```\n\nSelecting `Projects` here, we are then asked to enter a site name (which must be unique, I've set mine as domjay-next-porfolio, so you will have to choose a different one)\n\n```bash\n? Team:\n❯ dominickjay's team\n  Projects\n```\n\nLooks good, except for that error message at the bottom. Let's dig in and see what's going on.\n\n```\nError: No such directory dom-next-project\\out!\nDid you forget to run a build?\n```\n\nLooks like we were too quick to deploy, and forgot to actually _generate_ our site. At this time of writing, we need to add some extra lines to our `netlify.toml` file;\n\n```yaml\n[[plugins]]\npackage = \"@netlify/plugin-nextjs\"\n```\n\nAlso we will need to install this package using `npm install -D @netlify/plugin-nextjs@beta` to make it available for our deployment to be successful overall. For more information on the beta package, this is a great article: [Essential Next.js Build Plugin (beta)](https://github.com/netlify/netlify-plugin-nextjs#installing-the-beta)\n\n### What's the netlify.toml file?\n\nNetlify couldn't put it better themselves from their documentation;\n\n> ...is a configuration file that specifies how Netlify builds and deploys your site - including redirects, branch and context-specific settings, and more. Its goal is to describe much of your site configuration alongside your code - with two goals:\n> - When someone forks your repository, they can instantly create a Netlify site using the new repo. They don’t have to configure anything in the UI, and they’ll still get an identical site configuration.\n\t> - You can track configuration changes using version control and configure some things that aren’t customizable in our UI.\n\nThe reason we added these extra lines was because the `build` plugin that is being used will check for the `out` directory, but Netlify's beta version that was released for Next 12 was changed to match to the `.next` directory. This should be how our netlify.toml file looks at the moment;\n\n```yaml\n[build]\n\tcommand = \"yarn build\"\n\tpublish = \".next\"\n\n[[plugins]]\n\tpackage = \"@netlify/plugin-nextjs\"\n```\n\nNow we've got this sorted, lets run `netlify build` again.\n\n<aside-block type=\"info\" heading=\"\" text=\"\nI found that along the way - I think when the deploy command was run - that a /.next directory was created, which caused the `netlify build` command to hang. If this occurs to you, try deleting this directory and running the build command again.\"></aside-block>\n\nAfter a while, this should complete, with the CLI returning something like this;\n\n```bash\n? Site name (must be unique across all Netlify sites):\n› domjay-next-portfolio\n\nError: No such directory dom-next-project\\out!\nDid you forget to run a build?\n```\n\nRun the `netlify deploy` command for the final time, and....\n\n```bash\n$ netlify build\n\n────────────────────────────────────────────────────────\n  Netlify Build\n────────────────────────────────────────────────────────\n\n❯ Version\n  @netlify/build 18.x.x\n\n❯ Flags\n  {}\n\n❯ Current directory\n  /your-project\n\n❯ Config file\n  /your-project/netlify.toml\n\n────────────────────────────────────────────────────────\n  1. build.command from netlify.toml\n────────────────────────────────────────────────────────\n\n$ yarn build\n...\ninfo - Compiled successfully\n\n────────────────────────────────────────────────────────\n  Netlify Build Complete\n────────────────────────────────────────────────────────\n\n(Build time: 45.2s)\n```\n\nGot it!\n\nAt the end of the console message there is a website draft URL which you can navigate to, to see a preview of your site. Wonderful!\n\n## What's next?\n\nLet's say - hypothetically - that you are 100% happy with this boilerplate as your site. You want it to go live, hooray! So, how do we do that. If everything looks good on your draft URL, deploy it to your main site URL with the `--prod` flag.\n\n`netlify deploy --prod`\n\n```bash\n$ netlify deploy\n\nDeploy path: /your-project/.next\nDeploying to draft URL...\n\n✔ Finished hashing\n✔ CDN requesting 10 files\n✔ Finished uploading 10 assets\n✔ Deploy is live!\n\nLogs:    https://app.netlify.com/sites/domjay-next-portfolio/deploys/abc123\nWebsite Draft URL: https://abc123--domjay-next-portfolio.netlify.app\n```\n\nHopefully by following these steps, the deploy should move your site to its live environment!",
    "version": "1.0"
  },
  "description": "Setting up the Netlify CLI to deploy a Next application to Netlify",
  "path": "/writing/deploying-a-next.js-boilerplate-to-netlify",
  "publishedAt": "2021-11-03T00:00:00.000Z",
  "site": "https://dominickjay.com",
  "tags": [
    "react",
    "devops"
  ],
  "textContent": "import FYIBlock from \"../../components/FYIBlock.astro\";\n\n\tOutdated\n\tThis post was written in October 2021 against Netlify CLI 6.14.5 and Next.js 12. The core concepts still hold, but some CLI output and configuration details may have changed. The Netlify docs are worth a check before following along.\n\nClone repo\n\nPull down Cassidy Williams Next.js Netlify Starter repo. I've moved the contents of this - excluding the .git folder - into a seperate folder. Commit this repo to your github account, and add it to the Build Settings section in your Netlify account.\n\nWhat's in the repo\n\nThis projects contains; 2 sample components, a global stylesheet, a  for deployment (more on that later), and a  for setting up absolute imports and aliases. It also includes the Essential Next.js Build Plugin, which will allow for you to implement features like Preview Mode, server-side rendering/incremental static regeneration via Netlify Functions, and internationalized routing.\n\nYou can either do a \"one-click\" deploy from the github repo to push straight up to Netlify, or you can take the more challenging setup, which is what we are detailing today.\n\nInstall Netlify-CLI\n\nTo install Netlify CLI, make sure you have Node.js version 10 or later. For this post, I'm using the latest version of the CLI which at this time of writing is 6.14.5, and my node version is v14.17.0.\n\n or \n\nAfter installation, check version and basic information by using the  command.\n\n\tGlobal vs Local\n\tInstalling Netlify CLI globally means that your system always has the latest version, including any breaking changes. While global installation is appropriate for initial development and experimentation, for managing builds in a continuous integration (CI) environment, use local CLI installation instead.\n\nAuthenticating with Netlify\n\nNetlify CLI will use an access token in order to authenticate with Netlify. This token can be generated two ways; through the CLI, or through the Netlify UI. We're going to authenticate via the CLI here, using this command;\n\nWhen this command is run, we are redirected in the browser to this page to authorize the application. A browser window will open prompting us to authorize the Netlify CLI application.\n\nOnce we have aquired an access token, we should be able use one of the commands to push the contents of our folder to Netlify. Looking through the list of commands when we run  shows us that  would be the one to deploy the application, so let's try that!\n\nOk, so we run it, and are given this back. Seems pretty straightforward. Let's just select 'Create & configure a new site'.\n\nSelecting  here, we are then asked to enter a site name (which must be unique, I've set mine as domjay-next-porfolio, so you will have to choose a different one)\n\nLooks good, except for that error message at the bottom. Let's dig in and see what's going on.\n\nLooks like we were too quick to deploy, and forgot to actually generate our site. At this time of writing, we need to add some extra lines to our  file;\n\nAlso we will need to install this package using  to make it available for our deployment to be successful overall. For more information on the beta package, this is a great article: Essential Next.js Build Plugin (beta)\n\nWhat's the netlify.toml file?\n\nNetlify couldn't put it better themselves from their documentation;\n\n...is a configuration file that specifies how Netlify builds and deploys your site - including redirects, branch and context-specific settings, and more. Its goal is to describe much of your site configuration alongside your code - with two goals:\nWhen someone forks your repository, they can instantly create a Netlify site using the new repo. They don’t have to configure anything in the UI, and they’ll still get an identical site configuration.\n\t> - You can track configuration changes using version control and configure some things that aren’t customizable in our UI.\n\nThe reason we added these extra lines was because the  plugin that is being used will check for the  directory, but Netlify's beta version that was released for Next 12 was changed to match to the  directory. This should be how our netlify.toml file looks at the moment;\n\nNow we've got this sorted, lets run  again.\n\nAfter a while, this should complete, with the CLI returning something like this;\n\nRun the  command for the final time, and....\n\nGot it!\n\nAt the end of the console message there is a website draft URL which you can navigate to, to see a preview of your site. Wonderful!\n\nWhat's next?\n\nLet's say - hypothetically - that you are 100% happy with this boilerplate as your site. You want it to go live, hooray! So, how do we do that. If everything looks good on your draft URL, deploy it to your main site URL with the  flag.\n\nHopefully by following these steps, the deploy should move your site to its live environment!",
  "title": "Deploying a Next.js Boilerplate to Netlify"
}