[NextJS] Đặt components trong pages

07/11/2021

Khi làm việc với NextJS, đôi lúc mình có nhu cầu đặt components trong thư mục pages (chứa các component con cho 1 page nào đó). Nhưng vấn đề là những component đó sẽ bị tính là các page. Vậy làm sao để giải quyết vấn đề đó?

Cấu trúc thư mục cơ bản của một project sẽ có như thế này:

-- project
  |
  |- pages
    |- landing
      |- index.js
    |
    |- login
      |- index.js
    |
    |- home
      |- index.js
  |- components
  .
  .
  |- public

Thường thì thư mục components mình chứa các component có thể dùng chung giữa các pages, ví dụ như Layout, SEO, …

Nhưng khi làm một vài trang như Landing page chẳng hạn, gồm rất nhiều thư mục, nhu cầu mình muốn bỏ chung components của Landing page tại thư mục tương ứng của nó luôn mà không cần phải tách ra thư mục components ở ngoài.

NextJS có một giải pháp đó là Custom Page Extensions.

Trong file next.config.js chúng ta sẽ có thể config như này:

module.exports = {
  pageExtensions: ["jsx", "js", "tsx", "ts"],
}

Như vậy, chỉ những file có đuôi .jsx, .js,… mới được tính như là pages.

Thế nên, để giải quyết vấn đề ban đầu, mình sẽ thêm convention cho project là những component được tính là 1 page khi có đuôi là .page.js, ví dụ: landing.page.js

module.exports = {
  pageExtensions: ["page.jsx", "page.js", "page.tsx", "page.ts"],
}

Giờ chúng ta có thể để các components chung với thư mục chứa page.

-- project
  |
  |- pages
    |- landing
      |- index.page.js
      |- header.js
      |- footer.js
    |
    |- login
      |- index.page.js
    |
    |- home
      |- index.page.js
  |- components
  .
  .
  |- public

Nhược điểm

Tất cả các pages đều phải áp dụng convention này
Và những file như _app, _document đều phải áp dụng convention này

Kết luận

Đây chỉ là một solution cho nhu cầu này, có lẽ chúng ta sẽ không cần đến để project đơn giản hơn.