Web Development & Frameworks
Next.js & TypeScript Setup
Initializing a modern web project with Next.js, TypeScript, and Tailwind CSS.
Initializing a modern web project with Next.js, TypeScript, and Tailwind CSS.
1. Project Initialization
Run the following command in your terminal to start the setup wizard:
npx create-next-app@latest --typescript2. Directory Structure
After initialization, your src/ folder will look like this:
src/
├── app/ # Routes, layouts, and pages
│ ├── layout.tsx # Global UI (Header/Footer)
│ ├── page.tsx # Home page
│ └── globals.css # Global Styles (Tailwind)
├── components/ # Reusable UI components
├── lib/ # Utility functions and API clients
└── types/ # TypeScript interfaces/types3. Running the App
Navigate into your project folder and start the development server:
cd my-web-app
pnpm run devOpen http://localhost:3000 to see your app.
4. TypeScript Tips
-
Interfaces: Use
interfacefor object structures (e.g.,User,Product). -
Strict Mode: Keep
strict: trueintsconfig.jsonto catch more errors. -
Component Typing:
interface ButtonProps {
label: string;
onClick: () => void;
}
export default function Button({ label, onClick }: ButtonProps) {
return <button onClick={onClick}>{label}</button>;
}