Start your project with this template.

yarn create next-app -e https://github.com/imperadorxs/nextjs-13-boilerplate

npm install npm dev
yarn yarn dev

npm run build
yarn build

npm test
yarn test

This is your source code tree:

src
|-- common
   |-- assets
   |-- helpers
   |-- mocks
   |-- styles
   |-- utils
|-- components
|-- config
|-- hooks
|-- app
   |-- lib
          |-- registry
   |-- head.tsx
   |-- layout.tsx
   |-- page.tsx
|-- services
...

This is your component structure:

...
components
|-- YourComponent
   |-- YourComponent.tsx
   |-- YourComponent.spec.ts
   |-- YourComponent.stories.tsx
   |-- interfaces.ts
   |-- styles.ts
   |-- index.tsx
...

These are the folders and their functions:

./common

Here are all the project assets that will be used by the application such as global styles, images, fonts, mocks, reusable functions, among others

./components

Components are presentational only elements, grouping UI items

./configs

Configs are our application's global settings files

./hooks

Hooks are functions that allow you to “plug in” to React's state and lifecycle features from functional components

./app

App is a new pages folder are mapped in routes and have all the containers needed to implement a functionality

./services

Contains all the files responsible for consuming external services, such as the axios configuration file for consuming RestFul APIs.

Find and fix Javascrit and TypeScript problems according to pre-defined rules npm run lint yarn lint

The project is already configured with:

• React
• Typescript
• Jest
• Eslint
• Prettier
• Styled
• Husky
• Storybook

• nextjs
• react
• styled-components

• testing-library
• eslint
• husky
• lint-staged
• prettier
• typescript
• web-vitals