نیاز به دریافت اطلاعات یک فایل دیگر موضوع بسیار رایجی است که بسیاری از توسعه‌دهندگان با آن مواجه می‌شوند. از این رو، در این مقاله قصد داریم تا نحوه دریافت داده و خواندن یک فایل JSON در داخل برنامه Next.js و نمایش آن‌ها را با هم بررسی کنیم.

گام اول: کتابخانه‌های مورد نیاز را import می‌کنیم

ابتدا باید کتابخانه file system را از Node.js وارد کنیم. با استفاده از این کتابخانه می‌توانیم فایل‌ها را بخوانیم.

import { promises as fs } from 'fs';

گام دوم: یک سرور کامپوننت ایجاد می‌کنیم

در Next.js، یک سرور کامپوننت جدید ایجاد می‌کنیم، که این موضوع در App Router بصورت پیش فرض وجود دارد.

این کامپوننت به طور کامل بر روی سرور رندر می‌شود. به این ترتیب، دریافت ایمن داده‌ها مانند فایل‌های JSON یا ارتباط مستقیم با دیتابیس را برای ما امکان‌پذیر می‌کند.

import { promises as fs } from 'fs';

export default async function Page() {
  //...
}

گام سوم: فایل را می‌خوانیم

در ادامه قصد داریم تا فایل را بخوانیم. در این مثال، ما یک فایل JSON را می‌خوانیم. به این ترتیب، از تابع readFile از کتابخانه fs استفاده می‌کنیم. همچنین از تابع process.cwd برای دریافت دایرکتوری فعلی استفاده می‌نماییم و مسیر نسبی را به فایل خود اضافه می‌کنیم.

import { promises as fs } from 'fs';

export default async function Page() {
  const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');
  //...
}

آرگومان 'utf8' به Node می‌گوید که فایل را به عنوان یک فایل متنی کدگذاری شده UTF-8 تفسیر کند. نمونه فایل JSON که در app/data.jsonمی‌خوانیم به صورت زیر است.

{
  "title": "My Title",
  "content": "Lorem Ipsum"
}

گام چهارم: از داده‌های JSON استفاده می‌کنیم

در این مرحله، محتویات فایل را parse می‌کنیم. تابع readFileمحتویات را به صورت رشته‌ای return می‌کند، بنابراین از JSON.parseبرای تبدیل آن به یک آبجکت استفاده می‌نماییم.

import { promises as fs } from 'fs';

export default async function Page() {
  const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');
  const data = JSON.parse(file);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

به این ترتیب، هر زمان که از این صفحه بازدید می‌کنیم، Next.js داده‌ها را از فایل لود کرده و آن را در صفحه به نمایش می‌گذارد.

App Router و Colocation

App Router در Next.js از colocation فایل‌های پروژه ما پشتیبانی می‌کند. این بدان معنی است که می‌توانیم با خیال راحت فایل‌های پروژه خود را در داخل segmentهای route در App Router سازماندهی کنیم بدون اینکه نیاز باشد تا بصورت تصادفا آن‌ها را قابل مسیریابی نماییم. اگرچه ساختار مسیرها از طریق پوشه‌ها تعریف می‌شود، یعنی یک route تا زمانی که فایل page.jsیا route.jsبه بخش route اضافه نشود، برای عموم قابل دسترسی نخواهد بود.

جمع‌بندی

در این مقاله سعی کردیم تا با نحوه دریافت داده از یک فایل JSON به کمک کتابخانه file system در برنامه Next.js آشنا شویم.