🚀🎉📚 Boilerplate and Starter for Next.js 13+ with App Router and Page Router support, Tailwind CSS 3.3 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Storybook + PostCSS + Tailwind CSS + ContentLayer + i18next
Start your project with this template.
yarn create next-app -e https://github.com/casbah-ma/NextJs-13-Boilerplatenpm install && npm dev
yarn && yarn dev
npm run build
yarn build
npm test
yarn test
npm run add:component {component name}
yarn add:component {component name}
if you want to add a component with a subfolder, use the following command:
npm run add:component {component name} {folder name}
yarn add:component {component name} {folder name}
This is your source code tree:
src
|-- app
|-- api
|-- hello
|-- route.ts
|-- [locale]
|-- posts
|-- [slug]
|-- page.tsx
|-- layout.tsx
|-- page.tsx
|-- components
|-- configs
|-- helpers
|-- hooks
|-- lib
|-- registry
|-- styles
|-- global.css
|-- GlobalStyles.tsx
...
This is your component structure:
...
components
|-- YourComponent
|-- YourComponent.stories.tsx
|-- YourComponent.styles.ts
|-- YourComponent.types.ts
|-- index.tsx
...
This is your Markdown Files structure:
...
Data
|-- posts
|-- post-01.md
...
This is your tests structure:
...
__tests__
|-- components
|-- YourComponent.test.tsx
|-- pages
|-- YourPage.test.tsx
...
These are the folders and their functions:
./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
Find and fix JavaScript 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-component
- Husky
- Storybook
- ContentLayer
- TailwindCss
- Twin.macro
- Next-intl