Shahid Shabbir — Tue, 17 Dec 2024 15:00:38 +0000

How to learn machine learning by projects

Shahid Shabbir — Tue, 19 Nov 2024 01:29:48 +0000

Step-by-Step Guide to Deploying a Node.js + React App for Free

Shahid Shabbir — Sat, 29 Jun 2024 13:22:07 +0000

Step-by-Step Guide to Deploying a Next.js App for Free

Introduction

Deploying a full-stack Next.js application doesn't have to break the bank. In this guide, we'll walk through the process of deploying your application for free using Begin. Begin offers a straightforward way to host and manage your Next.js frontend and API routes without worrying about infrastructure costs.

Prerequisites

Before we begin, make sure you have the following:

Familiarity with JavaScript, Node.js, and React in general.
Basic understanding of serverless functions and API routes in Next.js.
Node.js installed on your development machine and able to run basic npm commands.
Familiarity with Git and GitHub for version control.

Step 1: Setting Up Your Project

Setting Up the Backend (API Routes in Next.js)

Initialize a Next.js project with API routes:

   npx create-next-app@latest backend
   cd backend

Create an API route (pages/api/data.js):

   // pages/api/data.js
   export default function handler(req, res) {
     res.status(200).json({ message: 'Hello from the backend!' });
   }

Start the Next.js development server:

   npm run dev

Setting Up the Frontend

Initialize a Next.js project for the frontend:

   npx create-next-app@latest frontend
   cd frontend

Start the Next.js development server:

   npm run dev

Step 2: Deploying Your Backend (API Routes)

Now, let's deploy your Next.js API routes to Begin.

Sign up for a free Begin account at Begin.com.
Install Begin CLI:

   npm install -g @begin/cli

Deploy your API routes:

   begin

Follow the prompts to set up your application on Begin.

Step 3: Deploying Your Frontend

Next, deploy your Next.js frontend and connect it to your deployed API routes.

Build your Next.js app:

   npm run build

Install @architect/s3 plugin (for hosting static sites):

   npm install @architect/s3

Deploy your frontend:

   npx arc deploy

Configure your frontend to fetch data from your deployed backend API routes.

Step 4: Configuring CI/CD

Automate deployments using GitHub Actions or any preferred CI/CD tool. Here's a basic GitHub Actions workflow example (/.github/workflows/deploy.yml):

name: Deploy to Begin

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies and deploy
        run: |
          npm install -g @begin/cli
          npm install
          begin deploy --name my-app
        env:
          BEGIN_APP_NAME: my-app
          BEGIN_ENV: staging
          BEGIN_TEAM_ID: ${{ secrets.BEGIN_TEAM_ID }}
          BEGIN_API_KEY: ${{ secrets.BEGIN_API_KEY }}

Conclusion

Congratulations! You've successfully deployed your Next.js application for free using Begin. Start building and deploying your projects without worrying about infrastructure costs. Happy coding!

🌐 Sources

Next.js Documentation

DEV Community: Shahid Shabbir

Whatsapp