Next.js project setup — full commands

This tutorial walks you through creating a new Next.js application with TypeScript, the App Router, a src directory, and installing useful SEO and UI packages. No Tailwind is used so you can use custom CSS.

1. Create a new Next.js app

From your project root, run create-next-app with the following flags for a TypeScript, App Router, and src setup:

npx create-next-app@latest ck444-seo \
  --ts \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --no-tailwind

cd ck444-seo

• --ts — TypeScript
• --app — App Router
• --src-dir — Use src/ for app and components
• --no-tailwind — Use your own CSS (e.g. globals.css)

2. Install SEO and UI helpers

These packages help with sitemap generation, icons, and conditional class names:

npm i next-sitemap
npm i lucide-react
npm i clsx

• next-sitemap — Generate sitemap (you can also use Next.js native sitemap.ts)
• lucide-react — Lightweight SVG icons
• clsx — Utility for conditional CSS classes

3. Optional: format and lint

For consistent formatting and import order, you can add Prettier and the organize-imports plugin:

npm i -D prettier prettier-plugin-organize-imports

Next step

After the project is created, add environment config for your site URL and auth links. See SEO metadata & JSON-LD for layout and metadata, or the tutorial index for all guides.