Nextjs 13 Boilerplate

🚀🎉📚 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 + Jest + Testing Library + styled-component + i18next

Download

NextJs-13 Starter Boilerplate

Getting Started

Start your project with this template.

yarn create next-app -e https://github.com/casbah-ma/NextJs-13-Boilerplate

How to run

npm install && npm dev
yarn && yarn dev

How to build

npm run build
yarn build

How to tests

npm test
yarn test

How to add Component folder

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}

File structure

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

More utils commands

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

Advantages of using this react project template

The project is already configured with:

React
Typescript
Jest
Eslint
Prettier
Styled-component
Husky
Storybook
ContentLayer
TailwindCss
Twin.macro
Next-intl

Main dependecies

Main dev dependecies

Top categories