Start your project with this template.
yarn create next-app -e https://github.com/imperadorxs/nextjs-13-boilerplatenpm 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