Yarn commands:
dev
: Starts next in development modebuild
: Builds the application for productionstart
: Starts the Next.js production serverexport
: Builds the application and exports to theout
folder.serve:static
: Builds, exports and serves the static app.lint
: Runs ESLint to check for linting errorslint:fix
: Runs ESLint and attempts to fix linting errorsformat
: Checks the code for formatting errors using Prettierformat:fix
: Fixes code formatting using Prettiertest
: Runs Jesttest:watch
: Runs Jest in watch mode
Open http://localhost:3000 with your browser to see the result.
Code generators help to create boilerplate code based on templates. This helps document best practices and keep the codebase consistent, as well as saving a bit of time. The templates are implemented in plopfile.ts
. See Plop.js
Generates the boilerplate code for a component. Includes the styles, main component file and the index.ts
file to export the main component and other functions or variables. The generator takes care of making capitalization of the files and variable names uniform.
Example:
# generates the code, prompting for the component name
$ yarn create-component
# generates the code using the given name (`usa map`)
$ yarn create-component 'usa map'
yarn run v1.22.10
$ plop component 'usa map'
✔ ++ /src/components/UsaMap/index.ts
✔ ++ /src/components/UsaMap/UsaMap.tsx
✔ ++ /src/components/UsaMap/UsaMap.styles.ts
✨ Done in 3.33s.
Generates the boilerplate code for a script, including an index.ts
and README.md
files. The index file includes basic argument parsing and processing. See scripts/sum
for an example.
Example:
# generate the code, prompting for the name and description
$ yarn create-script
# generates the code using the given name and description
$ yarn create-script 'fetch data' 'fetch data from the cloud'
yarn run v1.22.10
$ plop script 'fetch data' 'fetch data from the cloud'
✔ ++ /scripts/fetch-data/index.ts
✔ ++ /scripts/fetch-data/README.md
✨ Done in 3.44s.