Skip to main content

NextJS

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);