Next.js Template

Full-featured template for JAMstack websites using next.js

Picture generated with my Website Screenshot app.

Deploy your own copy of this project in just a few clicks on Vercel:

About

I built this template with all the tools I found useful to develop my own personal projects, so it can be a bit biased. If you find something that you think is not relevant or could be improved, please open an issue or a pull request to fix it.

Features

React.js with TypeScript

• Because I love strongly typed languages

Lint & format

• ESLint
• Prettier
• Pre-commit hook included to lint your staged files.

Testing Setup

• Jest
• React Testing Library to make tests that mimic real user interactions

UI

• TailwindCSS 2
• CSS modules are also supported by default by next.js

APIs

• The demo project does not use it, but with next.js you can have your APIs in a dedicated folder in the same repo and deploy them in no time with Vercel.

SEO

• Populate each page header metadata with name, description, image, etc.

Deployment

• CI with GitHub Actions
• Ready to deploy on Vercel using git integration or the command line (see 'deployment' section below)

Installation

Clone the repository and install the dependencies:

git clone https://github.com/jsulpis/nextjs-template.git && cd nextjs-template && yarn install

Usage

Development

Serve with hot reload at localhost:3000.

yarn dev

Build

Build for production: next.js automatically renders static HTML pages when possible. Then if you deploy on Vercel you can have both statically rendered pages and server-side rendered pages (as lambdas functions).

yarn build

Launch a server for server-side rendering (after building the application):

yarn start

Generate a fully static project with pre-rendered pages to put directly on a server or any static website hosting platform. Note that you lose the possibility to have server-side rendered pages. With Vercel you should not have to run this command.

yarn export

Deployment

This template is ready to be deployed on Vercel:

You can integrate Vercel with your GitHub account, which allows it to deploy each branch and pull request to their own environment, and the main branch in production.

Configuration

See the documentation page

What next ?

If you don't find what you are looking for in this template, there is a good chance that one of the many examples provided by Vercel will make you happy !

License

Released under the MIT license.