Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yazaldefilimone/clean-arch-nextjs-starter

Clean architecture starter for Next.js with TypeScript. All the tools you need to build your next project.
https://github.com/yazaldefilimone/clean-arch-nextjs-starter

boilerplate clean-architecture eslint frontend jest next nextjs react reactjs tdd testing-library typescript

Last synced: about 2 months ago
JSON representation

Clean architecture starter for Next.js with TypeScript. All the tools you need to build your next project.

Awesome Lists containing this project

README

        




Unsplash welcome!
License
License
Stars
Languages



Clean architecture starter for Next.js with TypeScript.

All the tools you need to build your nextxroject.

## Features
- ⚡️ Next.js 12
- ⚛️ React 18
- ⛑ TypeScript
- ✨ Styled Components - CssInJs for component styling
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the `~/` prefix
- ‽ Either Error Handler - For error handling. (Either is designed to hold either a left or a right value but never both).

## Quick Start

The best way to start with this template is using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).

```
# yarn
yarn create next-app -e https://github.com/yazaldefilimonepinto/clean-arch-nextjs-starter
# npm
npx create-next-app -e https://github.com/yazaldefilimonepinto/clean-arch-nextjs-starter
```

### Development

To start the project locally, run:

```bash
npm dev
our
yarn dev
```

Open `http://localhost:3000` with your browser to see the result.

### Requirements

- Node.js >= 12.22.0
- npm our yarn

### Directory Structure

- [`.husky`](.husky) — Husky configuration and hooks.

- [`public`](./public) — Static assets such as robots.txt, images, and favicon.

- [`src`](./src) — Application source code, including pages, components, styles.

### Scripts
- `yarn/npm dev` — Starts the application in development mode at `http://localhost:3000`.
- `yarn/npm build` — Creates an optimized production build of your application.
- `yarn/npm start` — Starts the application in production mode.
- `yarn/npm lint` — Runs ESLint for all files in the `src` directory.

### Path Mapping

TypeScript are pre-configured with custom path mappings. To import components or files, use the `~/` prefix.

```tsx
import { Button } from '~/presentation/components/Button';

// To import images or other files from the public folder
import avatar from '~/public/avatar.png';
```

**NOTE:**
As many use styled-component
I added the settings for it, but you can remove it at: `src/pages/_document.tsx` and remove global styles in: `src/shared/styles/globals.ts`

## License

[MIT](https://github.com/yazaldefilimonepinto/clean-arch-nextjs-starter/blob/main/LICENSE) © [Yazalde Filimone](https://www.linkedin.com/in/yazalde-filimone/)