Struktur Folder

• Directoryprisma/ # Database management (Prisma ORM)

  • schema.prisma # Database schema definitions and relationships
• Directorypublic/ # Static assets (images, fonts, etc.)

  • …
• Directorysrc/ # Main source code directory

  • Directoryapp/ # Next.js 13+ App Router directory

    • Directoryapi/ # API routes

      • Directorytrpc/ # tRPC API configuration

        • Directory[trpc]/ # tRPC dynamic routes

          • …
    • Directorycontact/ # Contact page feature

      • page.tsx # Contact page component
    • Directoryabout/ # About section with dynamic routing

      • Directory[type]/ # Dynamic route for different types

        • Directory[department]/ # Nested dynamic route for departments

          • page.tsx
      • Directorylogo-philosophy/ # Logo philosophy section

        • page.tsx
    • Directorydedication/ # Dedication page feature

      • page.tsx
    • Directorynews/ # News feature

      • page.tsx
    • page.tsx # Homepage
    • layout.tsx # Root layout
  • Directorycomponents/ # React components organized by feature

    • Directoryabout/ # About page components

      • …
    • Directorybrand/ # Branding related components

      • …
    • Directorycontact/ # Contact page components

      • …
    • Directorycommon/ # Shared components across features

      • global-footer.tsx # Footer component
    • Directorydedication/ # Dedication page components

      • …
    • Directorylogo-philosophy/ # Logo philosophy components

      • …
    • Directorymotion/ # Animation components

      • …
    • Directorynews/ # News feature components

      • …
    • Directoryui/ # Reusable UI components (shadcn/ui)

      • …
  • Directoryhooks/ # Custom React hooks

    • …
  • Directorylib/ # Utility functions and shared logic

    • utils.ts # General utility functions
  • Directorystyles/ # Styling files

    • globals.css # Global CSS styles
  • Directoryserver/ # Server-side code

    • Directoryapi/ # Server-side API implementations

      • …
  • Directorytrpc/ # tRPC configurations and routers

    • …
  • env.js # Environment variable validation (t3-env)

Penjelasan Struktur Direktori

Proyek ini mengikuti arsitektur T3 Stack, yang menekankan type-safety dan modularitas. Struktur dri atas menunjukkan susunan folder kami yang berbasis fitur, pemisahan kode klien/server yang jelas, dan mengikuti ketentuan Next.js App Router.

Direktori Utama

• prisma/: Berisi file yang berkaitan dengan basis data menggunakan Prisma ORM
  • schema.prisma: Mendefinisikan model basis data, hubungan, dan konfigurasi
• public/: Aset statis yang disajikan langsung
  • Gambar, font, dan resources publik lainnya
• src/: Direktori source code utama yang berisi semua kode aplikasi

Direktori Aplikasi (Next.js App Router)

Direktori app/ mengikuti ketentuan Next.js 13+ App Router:

• api/: Rute API back-end
  • trpc/: Konfigurasi dan endpoint API tRPC
• Halaman berbasis fitur: Setiap fitur utama memiliki direktori sendiri
  • about/, contact/, news/, dll.
  • Masing-masing berisi page.tsx untuk view utama
• Rute Dinamis: Menggunakan routing berbasis file Next.js
  • [type]/: Rute dinamis untuk berbagai jenis departemen
  • [department]/: Rute dinamis yang bersifat nested untuk halaman departemen

Direktori Komponen

Komponen disusun berdasarkan fitur dan tanggung jawab:

• Komponen Fitur: Dikelompokkan berdasarkan fitur
  • about/: Komponen khusus halaman about
  • contact/: Komponen halaman contact
  • news/: Komponen fitur news
• Komponen Umum: Dipakai pada seluruh fitur
  • common/: Komponen global seperti header dan footer
  • motion/: Komponen animasi dan transisi
  • ui/: Komponen UI yang dapat digunakan kembali (menggunakan shadcn/ui)
    • Tombol, formulir, modal, dll.
    • Konfigurasi tema dan komponen dasar

Direktori Inti

• hooks/: Custom React hooks untuk logika bersama
• lib/: Utilitas inti dan logika bersama
  • Pembantu otentikasi
  • Utilitas umum
  • Definisi dari type
• server/: Kode khusus pada sisi server
  • Implementasi API
  • Utilitas server
• trpc/: Konfigurasi dan router tRPC
  • Definisi rute API
  • Prosedur type-safe

Styles

• styles/: Konfigurasi styling global
  • globals.css: Style CSS global, konfigurasi Tailwind, dan konfigurasi tema Shadcn/UI

Mengimpor File

Untuk mengimpor file, Anda dapat menggunakan alias @/. Alias ini dikonfigurasi secara otomatis dalam proyek.

src/app/news/page.tsx

import { FadeIn } from "@/components/motion/fade-in";
import { MotionText } from "@/components/motion/motion-text";
import { UnderlineHover } from "@/components/motion/underline-hover";
import { NewsCard } from "@/components/news/news-card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { buttonVariants } from "@/components/ui/button";
import { abbreviation, cn, momentId } from "@/lib/utils";
import { api } from "@/trpc/server";

Pendekatan ini sangat berguna ketika Anda bekerja pada proyek besar dengan banyak file dan folder dan dapat dilakukan dengan memperbarui file tsconfig.json menjadi berikut:

Konfigurasi Typescript

tsconfig.json

{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "lint-staged.config.js", "commitlint.config.js"]
}