نیاز به دریافت اطلاعات یک فایل دیگر موضوع بسیار رایجی است که بسیاری از توسعهدهندگان با آن مواجه میشوند. از این رو، در این مقاله قصد داریم تا نحوه دریافت داده و خواندن یک فایل JSON در داخل برنامه Next.js و نمایش آنها را با هم بررسی کنیم.
ابتدا باید کتابخانه 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" }
در این مرحله، محتویات فایل را 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 در Next.js از colocation فایلهای پروژه ما پشتیبانی میکند. این بدان معنی است که میتوانیم با خیال راحت فایلهای پروژه خود را در داخل segmentهای route در App Router سازماندهی کنیم بدون اینکه نیاز باشد تا بصورت تصادفا آنها را قابل مسیریابی نماییم. اگرچه ساختار مسیرها از طریق پوشهها تعریف میشود، یعنی یک route تا زمانی که فایل page.js
یا route.js
به بخش route اضافه نشود، برای عموم قابل دسترسی نخواهد بود.
در این مقاله سعی کردیم تا با نحوه دریافت داده از یک فایل JSON به کمک کتابخانه file system در برنامه Next.js آشنا شویم.
۵۰ درصد تخفیف ویژه پاییز فرانت کست تا پایان هفته
کد تخفیف: atm