Building a Static Website with Next.js

Next.js is an open-source web development framework created by Vercel that allows React-based web applications to use server-side rendering and generate static websites.

In this project, we intend to create a static website using Next.js and launch it on GitHub Pages. To get started, you need to have Node.js installed on your system.

We use TypeScript as the programming language and PNPM as the package manager in this project. So, to build the project, use the following command.

npx create-next-app my-static-site --use-pnpm --typescript

This command will create a new Next.js app in a folder named my-static-site and use PNPM instead of the NPM or Yarn package managers to install project dependencies.

Depending on your internet speed, it takes a little time to install all the dependencies of the project. After the project building process is complete, open the my-static-site folder in your favorite editor.

Now you can create the required files for your website. To create pages and different sections of the website, you can use JSX files.

Assuming that you want to create a home page named index.tsx and an about page named about.tsx. To create each of these pages, you can create a new JSX file with the same name and put your code in it.

For example, to create the home page, open the existing index.tsx file and put the following code in it.

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <>
      <div>Welcome to my static site!</div>
    </>
  )
}

export default Home

And to create an about page, create a file named about.tsx and put the following code in it.

import type { NextPage } from 'next'

const About: NextPage = () => {
  return (
    <>
      <div>About us page!</div>
    </>
  )
}

export default About

Now we need to make some additional settings for the ease of building and exporting the project as static. Create a new file named .npmrc and add the following code to it.

enable-pre-post-scripts=true

Then open the package.json file and update the scripts section as follows:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next export",
    "start": "next start",
    "lint": "next lint"
  }
}

Now that you have built your project and created the necessary files, you can upload and launch your site on GitHub Pages. Follow these steps to do so:

First, you need to upload your project to GitHub. To do this, use Git commands and transfer the project to your repository on GitHub.

For example, if your repository name is my-static-site, enter the following commands in the terminal:

git remote add origin https://github.com/your-username/my-static-site.git
git push -u origin main

Then you need to update basePath and assetPrefix in the Next.js settings. To do this, place the following code in the next.config.js file:

module.exports = {
  basePath: '/my-static-site',
  assetPrefix: '/my-static-site/',
}

Note that my-static-site should be replaced with your repository name.

Now you need to build and export your site for GitHub Pages. To do this, use the following command:

pnpm run build

After building your site, you need to place the out folder inside a new branch named gh-pages. To do this, use the following commands:

git checkout -b gh-pages
git add out && git commit -m "Initial commit"
git subtree push --prefix out origin gh-pages

By running these commands, your site is now launched on GitHub Pages. To view the site, go to the following address (note that my-static-site should be replaced with your repository name):

 https://your-username.github.io/my-static-site/