دریافت داده از یک فایل در Next.js

سودا مجتهدی

اسفند 3, 1402

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

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

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

import { promises as fs } from 'fs';

import { promises as fs } from 'fs';

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

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

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

import { promises as fs } from 'fs';

export default async function Page() {

//...

}

import { promises as fs } from 'fs'; export default async function Page() { //... }

import { promises as fs } from 'fs';

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

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

در ادامه قصد داریم تا فایل را بخوانیم. در این مثال، ما یک فایل JSON را می‌خوانیم. به این ترتیب، از تابع

readFile

readFile از کتابخانه

fs استفاده می‌کنیم. همچنین از تابع

process.cwd

process.cwd برای دریافت دایرکتوری فعلی استفاده می‌نماییم و مسیر نسبی را به فایل خود اضافه می‌کنیم.

import { promises as fs } from 'fs';

export default async function Page() {

const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');

//...

}

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

import { promises as fs } from 'fs';

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

آرگومان

'utf8'

'utf8' به Node می‌گوید که فایل را به عنوان یک فایل متنی کدگذاری شده UTF-8 تفسیر کند. نمونه فایل JSON که در

app/data.json

app/data.jsonمی‌خوانیم به صورت زیر است.

{

"title": "My Title",

"content": "Lorem Ipsum"

}

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

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

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

در این مرحله، محتویات فایل را parse می‌کنیم. تابع

readFile

readFileمحتویات را به صورت رشته‌ای return می‌کند، بنابراین از

JSON.parse

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>

);

}

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> ); }

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

page.jsیا

route.js

route.jsبه بخش route اضافه نشود، برای عموم قابل دسترسی نخواهد بود.

جمع‌بندی

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

دیدگاه‌ها:

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.