در این وبلاگ، ما یک برنامه یادداشت با استفاده از Next.js 13 می سازیم. بیشتر، اگر نه همه، چیزهایی که برای ساختن این برنامه آموخته ام، از ویدیوی Fireship در مورد Next.js 13 آمده است. من به شدت توصیه می کنم با تماشای ویدیو، اطلاعات خوبی در مورد Next.js 13 ارائه می‌کند.
نصب Next.js 13
قبل از ایجاد یک برنامه Next.js 13، ابتدا باید مطمئن شویم که شما این شرایط را دارید:
- Node.js 16.8 یا بالاتر
- در MacOS، Windows (از جمله WSL)، یا لینوکس باشید
برای ایجاد پروژه Next.js 13 خود، دستور زیر را تایپ کنید:
npx create-next-app@latest --experimental-app
اگر می‌خواهید با من همراه باشید، اینها گزینه‌هایی هستند که من در هنگام شروع پروژه انتخاب کردم.
راه اندازی پایگاه داده
برای پایگاه داده خود، از PocketBase استفاده خواهیم کرد. برای دانستن بیشتر در مورد PocketBase می‌توانید به وب‌سایت رسمی آنها بروید یا ویدیویی در مورد آن تماشا کنید (ویدیوی PocketBase Fireship’s).
- برای راه اندازی PocketBase، بایگانی فشرده آن را دانلود کنید که می توانید در اسناد آنها پیدا کنید. پوشه را از حالت فشرده خارج کرده و فایل exe را در ساختار پروژه خود قرار دهید. پس از اتمام، این دستور را در CLI تایپ کنید:
./pocketbase serve
- پس از اتمام، CLI باید دو پیوند داشته باشد که می توانید روی آنها کلیک کنید. روی پیوند زیر «Admin UI» کلیک کنید. باید یک برگه جدید در مرورگر شما باز کند. اگر از شما خواسته شد، حساب مدیریت خود را ایجاد کنید.
- در تب PocketBase Admin UI، مجموعه جدیدی به نام «یادداشت» ایجاد کنید. در حین ایجاد مجموعه یادداشت ها دو فیلد “عنوان” و “یادداشت” را اضافه کنید، مطمئن شوید که فیلدها روی “متن ساده” تنظیم شده اند. پس از ایجاد فیلدها، به «قوانین API» بروید و روی تمام 5 قانون کلیک کنید تا قفل آنها باز شود.
پس از این مراحل، پایگاه داده شما باید راه اندازی شود.
برنامه Next.js 13 Notes
- زیر
appدایرکتوری، تمام فایل ها و پوشه ها را حذف کنید. یک فایل جدید بسازید:page.jsx، این به عنوان صفحه اصلی ما عمل خواهد کرد. خطوط کد زیر را کپی کنید:
export default function HomePage() {
return (
<div>
<h1>Home Page</h1>
<p>Click "Notes" to view the all of your notes.</p>
</div>
);
}
- پس از ایجاد فایل بالا، ما ایجاد می کنیم
layout.jsx، که با آن یک نوار ناوبری جهانی اضافه می کنیم. کد زیر را کپی کرده و روی آن قرار دهیدlayout.jsx.
import Link from "next/link";
import "./globals.css";
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<main>
<nav>
<Link href="https://dev.to/">Home</Link>
<Link href="/notes">Notes</Link>
</nav>
{children}
</main>
</body>
</html>
);
}
- ايجاد كردن
globals.cssو کد را کپی کنید:
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
padding: 0 2rem;
}
a {
color: inherit;
text-decoration: none;
padding: 0;
margin: 0;
}
nav a {
font-weight: bold;
margin: 0 0.5rem;
text-decoration: underline;
}
دایرکتوری یادداشت ها
- زیر
app، پوشه ای به نام ایجاد کنیدnotes. این به عنوان مسیر یادداشت های ما عمل می کند. در زیر پوشه یادداشت ها، فایلی به نام ایجاد کنیدpage.jsxو خطوط کد زیر را وارد کنید:
import Link from "next/link";
import styles from "./Notes.module.css";
async function getNotes() {
const response = await fetch(
"http://127.0.0.1:8090/api/collections/notes/records?page=1&perPage=30",
{ cache: "no-store" }
);
const data = await response.json();
return data.items;
}
export default async function NotesPage() {
const notes = await getNotes();
return (
<div>
<h1>Notes Page</h1>
<div className={styles.grid}>
{notes.map((note) => {
return <Note key={note.id} note={note} />;
})}
</div>
</div>
);
}
function Note({ note }) {
const { id, title, content, created } = note;
return (
<Link href={`/notes/${id}`}>
<div className={styles.note}>
<h2>{title}</h2>
<p>{content}</p>
<p>{created}</p>
</div>
</Link>
);
}
- ما می‌توانیم داده‌ها را از خود مؤلفه واکشی کنیم، زیرا هر مؤلفه Next.js 13 به طور پیش‌فرض یک مؤلفه سرور است.
- ايجاد كردن
Notes.module.cssو کد زیر را کپی کنید:
.grid {
margin-top: 2rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 1000px;
}
.note {
height: auto;
width: 200px;
padding: 0.2rem 1rem;
margin: 0.5rem;
background: #ffff00;
box-shadow: 4px 4px 8px 1px #00000075;
border-radius: 2px;
}
.title {
padding: 0.1rem;
font-size: 1rem;
}
.content {
font-size: 0.9rem;
font-weight: normal;
}
.created {
font-size: 0.7rem;
font-weight: lighter;
}
مسیر یادداشت های پویا
- زیر ما
notesپوشه ایجاد کنید[id]که حاوی دیگری استpage.jsx. درpage.jsxکد زیر را کپی کنید:
import Link from "next/link";
import styles from "../Notes.module.css";
async function getNote(noteId) {
const response = await fetch(
`http://127.0.0.1:8090/api/collections/notes/records/${noteId}`,
{
next: { revalidate: 10 },
}
);
const data = await response.json();
return data;
}
export default async function NotesPage({ params }) {
const note = await getNote(params.id);
return (
<div>
<h1>Note ID: {note.id}</h1>
<div className={styles.note}>
<h2>{note.title}</h2>
<p>{note.content}</p>
<p>{note.created}</p>
</div>
<Link href="/notes">Go Back</Link>
</div>
);
}
برنامه را راه اندازی کنید
هنگامی که کد ذکر شده در بالا را نوشتیم، اکنون می توانیم پروژه Next.js 13 خود را راه اندازی کنیم. دستور زیر را در خط فرمان اجرا کنید:
npm run dev
پس از راه‌اندازی (http://localhost:3000)، به صفحه اصلی هدایت می‌شود، که می‌گوید روی «یادداشت‌ها» (در نوار ناوبری) کلیک کنید تا یادداشت‌های خود را مشاهده کنید. در حال حاضر هیچ یادداشتی وجود ندارد، برای رفع این مشکل، به رابط کاربری مدیریت PocketBase ما بروید و با کلیک کردن روی «رکورد جدید» یادداشت‌ها را اضافه کنید. پس از اضافه شدن یادداشت ها، پروژه Next را به روز کنید و باید یادداشت های خود را ببینید.
ممنون از اینکه وقت گذاشتید و وبلاگ من را خواندید. امیدوارم چیز جدیدی یاد گرفته باشید. برای دانستن بیشتر در مورد Next.js 13، خواندن اسناد آنها و/یا تماشای ویدیوهای مربوط به موضوع را به شدت توصیه می کنم.
