Personal Frontend Dev Env Setting Project

This is a Next.js project bootstrapped with create-next-app.

Following ixartz Next js Boilerplate to understand all used packages, build and test process within it.

Features

⚡ Next.js with App Router and Page Router support
🔥 Type checking TypeScript
💎 Integrate with Tailwind CSS
✅ 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 (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
💖 Code Formatter with Prettier
🦊 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~~ (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~~ (scheduled)

Built-in feature from Next.js:

Note: This project is using yarn as a package manager. Also, implemented PnP(Plug n Play), Zero-install.

First, run the development server:

yarn dev

Open 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 to automatically optimize and load Inter, a custom Google Font.

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

This project is deploying via Vercel Platform from the creators of Next.js.