LoneRifle / next-netlify-starter

A fork of next-netlify-starter, with extra nice-to-haves

Next + Netlify Starter

This is a Next.js v12 project bootstrapped with create-next-app and set up to be instantly deployed to Netlify!

This project is a very minimal starter that includes 2 sample components, a global stylesheet, a netlify.toml for deployment, and a jsconfig.json for setting up absolute imports and aliases. It also includes the Essential Next.js Build Plugin, which will allow for you to implement features like Preview Mode, server-side rendering/incremental static regeneration via Netlify Functions, and internationalized routing.

(If you click this button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify)

Table of Contents:

• Getting Started
• Installation options
• Testing
  • Included Default Testing
  • Removing Dependabot
  • Removing Cypress

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Installation

1. Create a new repo using this repo as a template
2. Go to repo settings
3. Under general, enable auto-merge
4. Under branches, create a branch protection rule for the default branch that requires the test-cypress / main statuses to pass before merging
5. Connect to Netlify manually (the netlify.toml file is the one you'll need to make sure stays intact to make sure the export is done and pointed to the right stuff)
6. Disable deploys in the created Netlify site, as you will use .github/workflows/deploy-netlify.yml instead
7. Stash repo secrets under repo settings -> Secrets

• NETLIFY_AUTH_TOKEN - In Netlify, under User settings -> Applications, create a personal access token
• NETLIFY_SITE_ID - Obtained from Site settings -> Site details

Testing

Included Default Testing

We’ve included some tooling that helps us maintain these templates. This template currently uses:

• Dependabot - to regularly update our dependencies
• Cypress - to run tests against how the template runs in the browser
• Cypress Netlify Build Plugin - to run our tests during our build process

If your team is not interested in this tooling, you can remove them with ease!

Removing Dependabot

In order to keep our project up-to-date with dependencies we use a tool called Dependabot. If you’re not interested in this tooling, delete the .github/workflows/approve-merge-deps.yml and .github/dependabot.yml files and commit that onto your main branch.

Removing Cypress

For our testing, we use Cypress for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we’d expect.

If you’d like to remove Cypress entirely, delete the entire cypress folder and the cypress.config.ts file. Then remove the dependency using:

npm uninstall -S cypress