First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
This project is organized using the following directory structure:
project/
│
├── app/ # App directory for Next.js all all your pages (auto-routing) by page.tsx
│ │
│ ├── dashboard/ # Dashboard-related pages
│ │ ├── layout.tsx # Dashboard layout component
│ │ ├── page.tsx # Main dashboard page
│ │ ├── user # User page
│ │ │ └── page.tsx # User Page
│ │ └── ... # Other static or dynamic pages
│ │
│ ├── login/ # Login page
│ │ └──page.tsx
│ └── ...
│
├── components/ # Reusable components across your project
│ ├── ui/ # UI components like buttons, modals, etc.
│ ├── forms/ # Form components, maybe with Formik or React Hook Form
│ └── ... # Other component categorizations
│
│
├── lib/ # Lib
│ ├── context # Custom React context
│ ├── hooks/ # Custom React hooks
│ ├── services/ # services React hooks
│ └── utils/ # Utility functions and helpers
│
│── styles/ # Global styles, variables, theme configs
│── models/ # Global styles, variables, theme configs
│
├── public/ # Static files like images, fonts, etc.
│
├── styles/ # Global styles (if any outside the app directory)
│
├── types/ # TypeScript types, interfaces
│
├── .env.local # Environment variables
├── tsconfig.json # TypeScript configuration
├── next.config.js # Next.js configuration
└── package.json # Project metadata and dependencies