Next.js Starter Documentation

Development

• npm run dev - Runs next dev to start Next.js in development mode
• npm run build - Runs next build to build the application for production usage
• npm run start - Runs next start to start a Next.js production server
• npm run lint - Runs next lint to set up Next.js' built-in ESLint configuration
• npm run storybook - Starts Storybook locally
• npm run build-storybook - Builds Storybook for production
• npm run todo - Runs least to create a list of items marked for attention
• npm run commit - Displays a prompt to create a commit message

Folder Structure

This describes the folder layout of the Next.js Starter:

├── .storybook
├── app
|  ├── components
|    ├── atoms
|    ├── molecules
|    ├── organisms
|    ├── scss
|    ├── templates
|  ├── wordpress (example)
├── functions
|  ├── wordpress
├── lib
|  ├── Wordpress
├── styles
|  ├── minimal

.storybook

This folder holds the configuration for Storybook.

components

This folder contains the various React components that make up the website. They are organized into folders based on the Atomic Design system.

functions

This folder contains valuable functions for the front end.

lib

This folder contains the functions for communicating with the different APIs in the project. There is a folder for each specific API with a connector.js file for managing that connection:

• wordpress: for communicating with the headless WordPress install. The majority of the work will be in this folder.

  In the wordpress folder, there are two folders worth pointing out:

  • _partials contains fragments of GraphQL queries that are used in multiple places.
  • _global contains functions that are not tied to particular features, especially ones used in the creation of pages.

styles

This folder contains global project styles organized in sub-directories allowing developers to choose which CSS framework, if any, is needed for the project.

• minimal: a minimal CSS framework by Entermedia.

Import Configuration

Update the tsconfig.json file path for the @theme/* paths property to point to your chosen CSS framework to make it easier to import needed files.