WhoBuilt

Developing Locally

Jul 3, 2020· 10 min· 17K views·Watch on YouTube
#Web Development#Code Quality

Learn Next.js, teaching Next.js in the Mastering Next.js course, explains how to run a project locally and set up linting and formatting.

Get the prerequisites in place

Running the examples requires Node.js and a package manager. The course uses Yarn, though npm works too.

Run development and production builds

A project created with `npx create-next-app` can run locally with `yarn dev` and is available at port 3000. `yarn build` creates an optimized production build, while `yarn start` serves that build locally. The build output indicates which pages are static and summarizes the generated files.

Use ESLint to catch problems

ESLint performs static analysis to help find bugs and enforce consistent coding rules. Learn Next.js uses a configuration that includes checks for accessibility, Jest, React Hooks, and security, with an `.eslintrc` file for selecting and adjusting rules.

Format code and automate checks

Prettier can format code automatically on save, reducing manual cleanup and style debates during code review. A Git pre-commit hook using Husky and lint-staged can format staged files before they are committed.

Consider a zero-configuration option

StandardJS combines linting and formatting with defaults and no configuration files. It suits teams that prefer not to maintain custom rules, while developers with specific preferences can choose their own ESLint and Prettier setup.

Takeaways

  • Install Node.js and choose Yarn or npm before running a Next.js project.
  • Use `yarn dev` for development and `yarn build` followed by `yarn start` to check the production version locally.
  • Linting can catch bugs and enforce shared rules across a codebase.
  • Automatic formatting and pre-commit hooks can reduce style cleanup in reviews.
  • Choose configurable ESLint and Prettier or a zero-configuration option like StandardJS based on how much control the team wants.

Mentioned in this talk

ZeitMastering Next.jsLearn Next.jsNext.jsESLintVS CodeHuskyNode.jsYaRNnpmPrettierGitStandardJS

Search inside this talk

What was claimed 6

  • built
    Zeit built Next.js
    “Zeit, which makes Next.js”
    0:31inExporting & DeploymentYouTube
    Verified2 sources· Talk
  • feature
    Next.js: The example app can be run locally with a development server and built for production.
    “yarn dev, which runs it locally; yarn build, which builds the application for production”
    YouTube
    Unverified1 source· Talk
  • feature
    ESLint: Performs static analysis, helps catch bugs, can fix issues automatically, and enforces coding rules.
    “The point of a linter is to help you catch bugs and find problems.”
    YouTube
    Unverified1 source· Talk
  • feature
    Prettier: Can automatically format code on save.
    “you can automatically format code on save”
    YouTube
    Unverified1 source· Talk
  • integrates with
    Husky integrates with Git
    “bake this into a Git pre-commit hook using a tool like Husky”
    YouTube
    Unverified1 source· Talk
  • feature
    StandardJS: Provides linting and formatting defaults without configuration files.
    “you don't have to have any configuration files”
    YouTube
    Unverified1 source· Talk

Related talks

Developing Locally · WhoBuilt