Next.js

Panduan Pemasangan

Bina projek Next.js

terminal

npx create-next-app@latest nama-projek

Anda akan ditanya beberapa soalan. Pilih pilihan berikut:

terminal

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS?
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No
✔ What import alias would you like configured? … @/* … Yes

Selepas projek dibuat, pergi ke induk projek:

terminal

cd nama-projek

Pasang pakej

npm i @govtechmy/myds-react @govtechmy/myds-style

Konfigurasi stylesheet CSS

Anda boleh menetapkan gaya melalui salah satu daripada dua (2) kaedah yang disenaraikan di bawah.

1. Import CSS

app/global.css

@import "@govtechmy/myds-style/full.css";

2. Tailwind CSS

Sila baca Konfigurasi Gaya untuk konfigurasi lanjutan.

Mula menggunakan komponen!

Cubalah <Button /> untuk memulakan membina dengan MYDS!

components/button.tsx

"use client"; // Untuk Next App Router, mesti sertakan baris ini
import { Button } from "@govtechmy/myds-react/button";
 
export default () => {
  return <Button variant="primary-fill">Hello MYDS</Button>;
};

Penting

Komponen MYDS dibina untuk wujud di client, manakala Next.js App Router, secara lalai, membina komponen di server.

Untuk menetapkan komponen supaya dibina di client dalam Next.js, anda perlu menyertakan arahan use client dalam fail komponen. Manakala untuk Next.js Page Router, anda boleh mengabaikan arahan ini.

app/page.tsx

import Button from "../components/button";
 
export default function Home() {
  return (
    <div>
      <Button />
    </div>
  );
}

Next.js

Panduan Pemasangan

Bina projek Next.js

Pasang pakej

Konfigurasi stylesheet CSS

Mula menggunakan komponen!

Di halaman ini