Creating a Next.js App from a GitHub Template

Series: Full Stack Web Development
5 minutes
Updated: October 23, 2021

Introduction

GitHub templates make it easy for developers to create a new repository from a template repository that contains the same files & folders. In this codelab, you will create a new Next.js app from a template with all the boilerplate code you'll need.

The Template Repository

Let's first take a look at the template repository, creatively named next-ts-template. It comes configured with the following:

  • The latest version of Next.js (which as of this writing is 11.1.2)
  • Support for TypeScript
  • ESLint & Prettier: for enforcing good practices with TypeScript & Next.js / React
  • husky & lint-staged: for Git pre-commit hooks (prevents you from committing code with any ESLint errors)

Using the Template

To use next-ts-template:

  • Click the green button labeled, Use this template
  • Select the desired Owner of the repository
  • Type in the name for the repository (if you would like to complete the "Full Stack Web Development" series, name it bookshelf-web)
  • Add an optional description
  • Select the desired visibility of the repository (Public or Private)
  • De-select the option, Include all branches

The form should look something like this:

New Repo

Click Create repository from template and after a few moments, the new repository page should be available on GitHub.

Cloning & Running the New Project

Clone the new repository with git clone. Then, to run it:

# Install the dependencies
yarn

# Run the application in development mode
yarn dev

The web application should be up & running at http://localhost:3000.

App Running