NextJS

Rendering Strategies

Strategy	When HTML is generated	Data freshness	My use case
SSR (Server-Side Rendering)	On each request	Always fresh	Personalized pages, auth-gated content
SSG (Static Site Generation)	At build time	Stale until rebuild	Marketing pages, docs, blog posts
ISR (Incremental Static Regen)	At build time + revalidate interval	Fresh after TTL	Product catalogs, semi-dynamic content
CSR (Client-Side Rendering)	On client after hydration	Fresh on each fetch	Dashboards, user-specific data after load

In the App Router, every component is a React Server Component by default (rendered server-side). Add 'use client' only when you need interactivity.

Reference: Next.js Docs — Data Fetching

---

Quick Start

npx create-next-app@latest --ts

I prefer to use app router and src/

Folder Structure

Main

my-website
├── src
│   ├── app/[lang]/
│   ├── assets/
│   ├── components/
│   ├── constants/
│   ├── dictionaries/
│   ├── hooks/
│   ├── lib/
│   ├── locales/
│   ├── style/
│   ├── utils/
│   ├── i18n.config.ts
│   ├── mdx-components.ts
│   └── middleware.ts
│
.

App Router

Docs

app
├── [lang]
│   ├── nested-page
│       ├── layout.tsx
│       └── page.tsx
│   ├── _components
│   ├── _config
│   ├── _hooks
│   ├── _component_on_page.tsx
│   ├── _component2_on_page.tsx
│   ├── layout.tsx
│   └── page.tsx
.

Example result

Naming

Component Naming

Folder use kebab-case

login-form.tsx

Component use PascalCase

const LoginForm = () => {
  return (
    // ....
  )
}

export default LoginForm;

Variable Naming

use camelCase for common variable and function name

// Good
const totalPrice = calculatePrice(quantity, unitPrice);

// Bad
const x = calculatePrice(qty, price);