Ample's NEXT.js Starter

This starter serves as the starting point for Ample NEXT.js development projects. It has pre-configured preferences to make getting started less cumbersome. To create a new project from this template, click the green "Use this Template" button above.

Prerequisite

Install VOLTA

curl https://get.volta.sh | bash && volta install node && volta install yarn@1

Getting started

Development

cd next-starter-ample

Install node packages

yarn

Start the development server (http://localhost:3000)

yarn develop

Storybook

Storybook is used for documentation, development, and visual testing.

Start the storybook server (http://localhost:6006)

yarn storybook

Documentation

Alias Imports

This project supports alias imports. This provides a means for importing components without needing to know exactly where you are in the tree. It can make moving items around a little less painful.

The convention is to treat directories in our project like NPM scopes. The scope is to prepend with a @ character. There are several prefixes supported out of the box:

• @components maps to ./components
• @content maps to ./content
• @layout maps to ./layout
• @root maps to ./
• @templates maps to ./templates
• @utilities maps to ./utilities

Unfortunately, for seamless integration across the board, we have to configure aliases for every place in which we're going to use them, which means at least NEXT.js, Storybook, Jest, and VS Code. Therefore, they are replicated (with the appropriate syntax) in:

• .config/.jest/jest.config.js
• .config/.storybook/main.js
• jsconfig.json

If you wish to add a custom alias to your project, touch all appropriate config files.

Linters

It's recommended to set up seamless integration with your editor.

• ESLint statically analyzes your code to find problems in JavaScript quickly. (editor-integration)
• Prettier enforces a code formatting style guide for consistency across the team. (editor-integration)
• Stylelint helps avoid errors and enforces conventions in styles. (editor-integration)

Note: For an optimal development experience in VS Code install recommended workspace extensions. When using VS Code, most ESLint and Stylelint conventions will be fixed automatically.

Linters run pre-commit on staged files to ensure there are no errors or warnings.

License

next-starter-ample is distributed under the MIT License.