@kpverse/deploy-nextjs NPM

What is this for?

@kpverse/deploy-nextjs is an npm package to simplify the process of deploying Next JS project on GitHub Pages.

How can this benefit developers?

No need to make Next JS project repository public. Only the deployment repository will b public.
No need to create an account on Vercel or Netlify to host Next JS.
You can use free and open-source CDNs for content delivery. (For more information read recommended Next JS configuration.)

Is this suitable for beginners?

Yes, it is beginner-friendly and streamlines the deployment process for developers of all skill levels.

Prerequisites

To use @kpverse/deploy-nextjs, your deployment repository must be hosted on GitHub, and GitHub Pages must be enabled.

Installation

You can install this package using pnpm or npm or yarn:

npm i @kpverse/deploy-nextjs -D

# or

pnpm i @kpverse/deploy-nextjs -D

# or

yarn add @kpverse/deploy-nextjs --dev

Quick Start Guide

After installation, simply run the following command to get started:

npx deploy-nextjs

Configuration Options for @kpverse/deploy-nextjs

The package generates a deploy-nextjs.config.js file upon first use, allowing you to customize your deployment configurations.

Recommended Next JS Configuration

// Recommended Next JS Configuration (next.config.js)

let GITHUB_USERNAME = "<YOUR_GITHUB_USERNAME>",
    DEPLOYMENT_REPOSITORY_NAME = "<DEPLOYMENT_REPOSITORY_NAME>",
    BASE_PATH = "<BASE_PATH>";

/** @type {import('next').NextConfig} */
const nextConfig = {
    // Read official docs from Next JS: https://nextjs.org/docs/app/api-reference/next-config-js/basePath
    // NOTE: It is optional.
    basePath: `/${BASE_PATH}`,

    // Read official docs from Next JS: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix
    // NOTE: It is optional.
    assetPrefix: `https://cdn.jsdelivr.net/gh/${GITHUB_USERNAME}/${DEPLOYMENT_REPOSITORY_NAME}@latest/${BASE_PATH}`,

    // Read official docs from Next JS: https://nextjs.org/docs/app/api-reference/next-config-js/output
    output: "export",

    // Read official docs from Next JS: https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash
    trailingSlash: true,
};

module.exports = nextConfig;