Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/juunie-roh/setting-up-next


https://github.com/juunie-roh/setting-up-next

eslint headlessui-react heroicons-react husky jest lint-staged nextjs postcss prettier react-redux react-three-cannon react-three-drei react-three-fiber redux reduxjs-toolkit semantic-release storybook tailwind-css tailwindcss typescript

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# Personal Frontend Dev Env Setting Project



This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).



Following [ixartz](https://github.com/ixartz/Next-js-Boilerplate) Next js Boilerplate to understand all used packages, build and test process within it.



## Features



- ⚡ [Next.js](https://nextjs.org) with App Router and Page Router support

- 🔥 Type checking [TypeScript](https://www.typescriptlang.org)

- 💎 Integrate with [Tailwind CSS](https://tailwindcss.com)

- ✅ Strict Mode for TypeScript and React 18

- ♻️ Type-safe environment variables with T3 Env

- ⌨️ Form with React Hook From

- 🔴 ~~Validation library with Zod~~ (scheduled)

- 📏 Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)

- 💖 Code Formatter with [Prettier](https://prettier.io)

- 🦊 Husky for Git Hooks

- 🚫 Lint-staged for running linters on Git staged files

- 🚓 Lint git commit with Commitlint

- 📓 Write standard compliant commit messages with Commitizen

- 🦺 Unit Testing with Jest and React Testing Library

- 🧪 ~~Integration and E2E Testing with Playwright~~ (scheduled)

- 👷 Run tests on pull request with GitHub Actions

- 🎉 Storybook for UI development

- 🖥️ ~~Monitoring as Code with [Checkly](https://www.checklyhq.com)~~ (scheduled)

- 🎁 Automatic changelog generation with Semantic Release

- 💡 Absolute Imports using `@` prefix

- 🗂 ~~VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest~~

- 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO

- 🗺️ Sitemap.xml and robots.txt with next-sitemap

- ⚙️ ~~[Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)~~ (scheduled)



Built-in feature from Next.js:



- ☕ Minify HTML & CSS

- 💨 Live reload

- ✅ Cache busting



## Getting Started



> **Note**: This project is using `yarn` as a package manager.

> Also, implemented PnP(Plug n Play), Zero-install.



First, run the development server:



```bash

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.tsx`. The page auto-updates as you edit the file.



This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.



## 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/)



## Deploy on Vercel



This project is deploying via [Vercel Platform](https://vercel.com/new?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 the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.