Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/jhonatanmizu/boilerplate_nexjs_app_routes

Boilerplate nextjs using app routes
https://github.com/jhonatanmizu/boilerplate_nexjs_app_routes

Last synced: about 1 month ago
JSON representation

Boilerplate nextjs using app routes

Awesome Lists containing this project

README

        

# A nexjs app routes boilerplate

## What is inside?

This project uses lot of stuff as:

- [TypeScript](https://www.typescriptlang.org/)
- [NextJS](https://nextjs.org/)
- [Styled Components](https://styled-components.com/)
- [Jest](https://jestjs.io/)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
- [Storybook](https://storybook.js.org/)
- [Eslint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Husky](https://github.com/typicode/husky)

### Explanation :

By combining these tools and practices, we create a development process that promotes code quality, consistency, and collaboration among our team members. When a developer attempts to commit changes, these tools ensure that the code meets our coding standards and passes all necessary tests. If any issues are identified, developers are prompted to address them before proceeding with the commit. This early feedback loop minimizes the risk of introducing bugs and guarantees that our codebase remains cohesive and well-maintained.

It's important to note that the specific configuration and utilization of these tools may vary based on our project's unique requirements and the technologies we use. We tailor their settings to align with our team's coding standards and project goals.

### How to use

- 1 - We need the basic tools: nodejs, a code editor I personally recommend vscode, coffee and git.
- 2 - We need to clone the template using the command: ***npx create-next-app --example https://github.com/Jhonatanmizu/boilerplate_nexjs_app_routes my-project-name***

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

## Commands

- `dev`: runs your application on `localhost:3000`
- `build`: creates the production build version
- `start`: starts a simple server with the build production code
- `lint`: runs the linter in all components and pages
- `test`: runs jest to test all components and pages
- `test:watch`: runs jest in watch mode
- `storybook`: runs storybook on `localhost:6006`
- `build-storybook`: create the build version of storybook

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.