Next js static html deployment to SSH server using Github action.

In this blog post we are going to be deploying a Nextjs application to an SSH server using GitHub action.

step 1:
Create a new next js project by typing

npx create-next-app nextjs-blog --use-yarn

step 2:
Update your your build key in you package.json file to

   "build": "next build && next export",

Adding the next export enables next to build and store them in out folder, containing the static html of your app.

---

Note you can't using next methods like getServerSideprops or next image optimization with next export.

---

step 3:
we create our main.yaml file in the root of our project

name: nextjs-blog
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy next site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2.3.1

      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'

      - name: Install Project Dependencies
        run: npm install



      - name: Build
        run: npm run build

      - name: Verify build
        run: ls -la out

      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  XXXXXXXXX
          PORT:  XXXX
          USERNAME:  XXXX
          PASSWORD: XXXXXXXXXXXXXXXXXXXX
        with:
          source: "./out"
          target: "/var/www/html/nextjs-blog"
          strip_components: 2 # this is important

That how you deploy a Nextjs application to SSH server using github action.Thanks for reading

Comments

[Hassan Yewande]

Weldone💪🏾💪🏾💪🏾