Next TSX

Next.js build with TypeScript support

For detailed explanation on how things work, check out Next.js docs.

To learn more about the TypeScript build, visit Next TypeScript.

Table of contents

• What's included
• Integrations
• Requirements
• Installation
• Development
  • Serve with hot reload
• Production
  • Build project
  • Serve on localhost
• Deployment
  • Export static version
  • Hosting
    • Deploy to Netlify
    • Deploy to ZEIT Now
• Testing
  • Run all tests
  • Code coverage
  • End-to-end tests (Cypress)
  • Unit tests (Jest)
  • Update snapshots
• Documentation
• Links
• License

What's included

• Babel
• Cypress
• Emotion
• ESLint
• Husky
• Jest
• Next.js
• Prettier
• React
• React-axe
• Remark
• Stylelint
• TypeScript

Integrations

• Codacy
• Codecov
• Depfu
• GitHub Actions
• LGTM

Requirements

• Node.js

Installation

$ npm run install

Development

Serve with hot reload

$ npm run dev

Default location: http://localhost:3000/

Production

Build project

$ npm run build

Files will be generated in the .next folder.

Serve on localhost

$ npm start

Default location: http://localhost:3000/

Deployment

Export static version

$ npm run build
$ npm run export

Files will be generated in the dist folder.

Hosting

Deploy to Netlify

1. Sign-up or log-in to Netlify
2. Create a new site from Git using your own copy of this repository
3. Choose an owner and a branch to deploy from
4. Change the following settings in the build options:
   • Build command:

     npm run export

   • Publish directory:

     dist/

5. Click on Deploy site to publish

View the documentation for more details on how to set up and deploy your project.

See the demo site on Netlify.

Deploy to ZEIT Now

1. Sign-up or log-in to ZEIT Now
2. Install the Now CLI and log-in to the service in your terminal:

   $ npm install -g now
   $ now login

3. Enter your email address
4. Click on the confirmation link when you receive it in your inbox
5. After you've verified your account, you can deploy the site with:

   $ now --prod

View the documentation for more details on how to set up and deploy your project.

See the demo site on ZEIT Now.

Testing

All test related files are located under __tests__, except a few configs which are found in the root of the project.

Run all tests

$ npm test

This will run both the end-to-end tests as well as the unit tests.

Code coverage

$ npm run test:coverage

A full coverage report will be generated in the coverage folder. To access it, open the index.html file in your browser, which is located in the lcov-report folder.

End-to-end tests (Cypress)

$ npm run test:e2e

This will run all tests without generating any additional files.

Alternatively, if you want Cypress to create screenshots and a video of what it sees, use the following command:

$ npm run test:e2e:record

Screenshots and videos will be generated in the cypress folder.

Unit tests (Jest)

$ npm run test:unit

Update snapshots

$ npm run test:update

Documentation

• Babel documentation
• Cypress documentation
  • Cypress fixtures
  • TypeScript support
• EditorConfig documentation
• Emotion documentation
  • Emotion theming
• ESLint documentation
  • ESLint with TypeScript support
• Git documentation
• Husky documentation
• Jest documentation
  • Jest with TypeScript support
• Next.js documentation
  • Next.js with TypeScript support
• Prettier documentation
• React documentation
• Remark documentation
  • Remark CLI
  • Remark linter
  • Remark plugins
  • Recommended preset
  • Style guide
• Stylelint documentation
• TypeScript documentation

Links

• Awesome Next
• Cypress recipes
• GitHub Markdown guide
• React testing recipes

License