Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/knid/next-netlify-starter


https://github.com/knid/next-netlify-starter

Last synced: 20 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Next + Netlify Starter



[![Netlify Status](https://api.netlify.com/api/v1/badges/46648482-644c-4c80-bafb-872057e51b6b/deploy-status)](https://app.netlify.com/sites/next-dev-starter/deploys)



This is a [Next.js](https://nextjs.org/) v12 project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and set up to be instantly deployed to [Netlify](https://url.netlify.com/SyTBPVamO)!



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](https://github.com/netlify/netlify-plugin-nextjs), which will allow for you to implement features like Preview Mode, server-side rendering/incremental static regeneration via Netlify Functions, and internationalized routing.



[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex-cs)



(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](#getting-started)

- [Installation options](#installation-options)

- [Testing](#testing)

  - [Included Default Testing](#included-default-testing)

  - [Removing Renovate](#removing-renovate)

  - [Removing Cypress](#removing-cypress)



## Getting Started



First, run the development server:



```bash

npm run dev

# or

yarn dev

```



Open [http://localhost:3000](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 options



**Option one:** One-click deploy



[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex-cs)



**Option two:** Manual clone



1. Clone this repo: `git clone https://github.com/netlify-templates/next-netlify-starter.git`

2. Navigate to the directory and run `npm install`

3. Run `npm run dev`

4. Make your changes

5. Connect to [Netlify](https://url.netlify.com/Bk4UicocL) 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)



## Testing



### Included Default Testing



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



- [Renovate](https://www.mend.io/free-developer-tools/renovate/) - to regularly update our dependencies

- [Cypress](https://www.cypress.io/) - to run tests against how the template runs in the browser

- [Cypress Netlify Build Plugin](https://github.com/cypress-io/netlify-plugin-cypress) - to run our tests during our build process



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



### Removing Renovate



In order to keep our project up-to-date with dependencies we use a tool called [Renovate](https://github.com/marketplace/renovate). If you’re not interested in this tooling, delete the `renovate.json` file and commit that onto your main branch.



### Removing Cypress



For our testing, we use [Cypress](https://www.cypress.io/) for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we’d expect. By default, we have Cypress not generate deploy links if our tests don’t pass. If you’d like to keep Cypress and still generate the deploy links, go into your `netlify.toml` and delete the plugin configuration lines:



```diff

[[plugins]]

  package = "netlify-plugin-cypress"

-  [plugins.inputs.postBuild]

-    enable = true

-

-  [plugins.inputs]

-    enable = false 

```



If you’d like to remove the `netlify-plugin-cypress` build plugin entirely, you’d need to delete the entire block above instead. And then make sure sure to remove the package from the dependencies using:



```bash

npm uninstall -D netlify-plugin-cypress

```



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



```bash

npm