Nexcn

⚠️🔴 Important: Please ignore the npm i create-nexcn instruction in the sidebar. This package is an interactive CLI tool, not a dependency.

🚩 Before getting started, make sure you have: Node.js 20.x or higher, and pnpm 8.x or higher (✅ install with npm install -g pnpm)

🚀 How to Use

To create a new project, run one of the following commands:

➡️ Option 1: Using npx

npx create-nexcn my-app

➡️ Option 2: Using npm init

npm init nexcn my-app

Then

cd my-app
pnpm dev

Nexcn Preview

About Nexcn

A Next.js 16 starter with everything you need to ship fast: TypeScript, Tailwind CSS v4, Base UI, internationalization, and testing configured out of the box.

Nexcn is designed for developers who want to build modern web applications without spending time on boilerplate configuration. Whether you're building a personal project, SaaS product, or multi-language application, Nexcn comes pre-configured with production-ready tooling and best practices so you can focus on building your product.

Manual Installation

# Clone the repository
git clone https://github.com/mohamed-g-shoaib/nexcn.git my-app

# Navigate to your project
cd my-app

# Install dependencies
pnpm install

# Run development server
pnpm dev

Open http://localhost:3000 in your browser.

What's Included

• Next.js 16 with App Router and React 19 - Server components for better performance and modern development patterns
• TypeScript with strict mode enabled - Catch errors at compile time and write safer, more maintainable code
• Tailwind CSS v4 with Base UI components - Build responsive UIs with utility-first styling and accessible components
• shadcn/ui integration - Copy-paste component library built on Radix UI for maximum customization
• next-intl for English/Arabic i18n - Internationalization with RTL support for global applications
• Vitest for unit testing + Playwright for E2E tests - Testing setup so you can ship with confidence
• ESLint, Prettier, and Husky for code quality - Automated formatting and pre-commit hooks maintain code standards
• SEO optimized - Metadata management and automatic sitemap generation for search visibility

Documentation

Read the guides in order to get started:

1. Getting Started - Prerequisites, environment setup, and initial configuration
2. Project Structure - Folder organization and where to add your code
3. Styling Guide - Using Tailwind CSS v4 and customizing components
4. Adding Components - Creating reusable components with Base UI and shadcn/ui
5. Internationalization - Setting up multi-language support with next-intl
6. Testing Guide - Writing unit and E2E tests with Vitest and Playwright
7. SEO Optimization - Optimize for Google ranking, sitemap, JSON-LD schema, and LLM crawling
8. RTL Support - Adding support for right-to-left languages like Arabic
9. Cheat Sheet - Quick reference for common tasks and commands

Commands

Development

pnpm dev # Start dev server
pnpm build # Build for production
pnpm start # Run production build

Testing

pnpm test # Run unit tests
pnpm test:e2e # Run E2E tests
pnpm test:coverage # Generate coverage report

Code Quality

pnpm lint # Check for linting errors
pnpm lint:fix # Auto-fix linting errors
pnpm format # Format code with Prettier
pnpm type-check # Check TypeScript types

Deployment

You can deploy on Vercel easily with their cli with the following command :

vercel

for more info check Deploying Projects from Vercel CLI

Troubleshooting

"pnpm command not found"

• Install pnpm globally: npm install -g pnpm
• Or use npx: npx pnpm install

Port 3000 already in use

• Run dev server on a different port: pnpm dev -- -p 3001

Styling not applying correctly

• Clear .next cache: rm -rf .next (or rmdir /s .next on Windows)
• Restart the development server

TypeScript errors in IDE

• Make sure TypeScript is installed: npm install -g typescript
• Restart your editor's TypeScript server

Issues

If you find any issues, please open an issue on the GitHub repository.

Contributing

Fork the repository, create a feature branch, and submit a pull request. Licensed under MIT.