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:

• ☕ 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:

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.

Learn More

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

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository

Deploy on Vercel

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

Check out the Next.js deployment documentation for more details.