Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Opinionated Next.JS Boilerplate with TypeScript and Material-UI

License

Notifications You must be signed in to change notification settings

Rethunk-Tech/nextjs-boilerplate

Repository files navigation

Next.JS Boilerplate

CodeQL Analysis Workflow Status Cypress Workflow Status License

This is an opinionated Next.js boilerplate, with:

Getting Started

First-Time Setup

If this is your first time using NodeJS, you'll need to install Yarn to use this project:

(You only need to do this once per system you develop on.)

npm install -g yarn

Then, we can clone the repository into a path of your choosing:

git clone https://github.com/Rethunk-Tech/nextjs-boilerplate.git project-name
cd project-name

Finally, install the dependencies using yarn.

cd project-name
yarn install

Running the Dev Server

You can run the server locally with the following command:

yarn run dev -p 9000

With Docker

Or, you can use Docker to run the server within containers:

  1. Install Docker Compose

  2. Enable BuildKit for Docker. (It's faster and has cache.)

  3. "Up" the composition (specifying --build to force a re-build):

    docker-compose up --build

Open http://localhost:9000 with your browser to see the result.

Debugging

If you need to debug something inside the container, you can get a shell using:

docker-compose run --rm -u 0 nextjs sh

Developing with this Boilerplate

First, open http://localhost:9000/ in a browser, and open pages/index.tsx in your preferred editor. Side-by-side the windows as shown below for the most convenient developing experience! (Even better with more monitors.)

Any changes made to a file in pages will automatically update in the browser as long as the dev server is running.

You can start editing the page by modifying pages/index.tsx.

API routes can be accessed on http://localhost:9000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

TypeScript

Next.JS

Material UI

Cypress E2E Testing