روتینگ فارسی برای next js

اون دسته از عزیزانی که با next js کار کردن می دونن که روتینگ فارسی نداشت و کلی داستان داریم براش تا بتونیم روت های استاتیک و یا داینامیکی بسازیم

یعنی اگر بخوایم داشته باشیم

http://localhost:3000/سلام

باید توی فایل هامون یه

 سلام.js

ایجاد کنیم و داخلش کدمون رو بنویسیم ولی خب به دلیل این که UTF-8 در فایل سیستم متفاوته با UTF-8 در url همچنان صفحه 404 خواهیم داشت یعنی چی ؟

بذارید یه مثال بزنم

کلمه "سلام" رو در زبان فارسی در نظر بگیرید

این در محیط دسکتاپ برابر است با :

\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85

ولی در url برابر است با :

%D8%B3%D9%84%D8%A7%D9%85

خب واضحه که این دو تا رشته با هم برابر نیستن پس وقتی ما در محیط دسکتاپ یه فایل ایجاد می کنیم next سعی می کنه

http://localhost:3000/%D8%B3%D9%84%D8%A7%D9%85

رو باز کنه در فایل سیستم دنبالش می گرده ولی پیدا نمی کنه چون در فایل سیستم چنین چیزی ذخیره شده

http://localhost:3000/\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85

خب حالا فهمیدیم مشگل کجاس

چطوری حلش کنیم ؟

جناب next یه کانفیگی داره به اسم Rewrites که با استفاده از اون می تونیم بگیم از روی فایل سیستم تشخیص نده و فایل ها رو از اونجایی که ما می گیم بخونه در واقع روال قبلی next رو داره دور می زنه و این امکان رو به ما می ده تا بگیم تو کدوم روت چه فایلی رو بخونه

بذارید با مثال بریم جلو :

فرض کنید محتویات فایل next.config.js یه پروژه ای به این صورته :

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

این یعنی محتویات صفحه

http://localhost:3000/about

داره از فایل index.js پروژه خونده می شه

خب این دقیقا چیزیه که ما لازم داریم با یکم تغییرات بیاید برای

http://localhost:3000/سلام

امتحان کنیم یعنی :

module.exports = {
  async rewrites() {
    return [
      {
        source:`/${encodeURI(&quotسلام&quot)}`,
        destination: '/hello',
      },
    ]
  },
}

اون /hello که می بینید در واقع یک فایل hello.js توی پوشه pages ساختیم و اون مقدار

 ${encodeURI(&quotسلام&quot)}

دقیقا انکد شده "سلام" هستش

این طوری پیج های غیر داینامیکی رو می تونیم به فارسی روت کنیم حالا بازم اگر لازم باشه همچین روتی داشته باشیم

http://localhost:3000/سلام/hi

باید داخل فایل next.config.js براش کانفیگ کنیم تا بشناسه یعنی

module.exports = {
  async rewrites() {
    return [
      {
        source:`/${encodeURI(&quotسلام&quot)}`,
        destination: '/hello',
      },
      {
         source: '/${encodeURI(&quotسلام&quot)}/hi',
         destination: '/hello/hi',
       },
    ]
  },
}

برای پیج های داینامیکی بعد از روت فارسی هم می تونیم اینطوری کانفیگ بنویسیم

module.exports = {
  async rewrites() {
    return [
      {
        source: '/${encodeURI(&quotسلام&quot)}',
        destination: '/hello',
      },
      {
         source: '/${encodeURI(&quotسلام&quot)}/:id',
         destination: '/hello/:id',
       },
    ]
  },
}

توجه کنید برای این که id رو بگیرید باید توی فولدر pages/hello یک فایل به اسم id].js] بسازید

امیدوارم مفید باشه :)