PageExtensionsは、私がCRAからNextjsまで移行するのを助けた方法

私は、私の作成反応アプリプロジェクトのページの次のファイル構造を持っていた.

/components
  /Navbar
    index.js
    Navbar.js
    Navbar.scss

/pages
  /Home
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.scss
    index.js
    Home.js
    Home.scss

  /About
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.scss
    index.js
    About.js
    About.scss

ページディレクトリ内のコンポーネントディレクトリを使用して、pages/<page-name>/component ディレクトリは、特定のページでのみ使用されます.これは再利用性よりもモジュール性の方が多い.
再利用可能なコンポーネントの場合は、トップレベルのコンポーネント/ディレクトリを使用します.などのコンポーネントNavbar , Footer , Button , など
nextjsに移行している間、デフォルトでnextjsがページディレクトリ内にあるディレクトリ構造に基づいてルートを作成するので、このパターンは問題になります.
デフォルトでは、nextjsはルート用のページをビルドしますlocalhost:3000/Home/components/HeroSection これは本当に我々がここでするつもりではない.
解決方法
用途pageExtensions あなたのnext.config.js

// next.config.js
module.exports = {
  pageExtensions: ['page.js']
};

我々がここでしていることは、nextjsにすべてのページが接尾辞であるということを知らせさせていることですpage.js . それで、我々のページは、現在ありますindex.page.jsこれでnextjsのディレクトリ構造が更新されます-

/components
  /Navbar
    index.js
    Navbar.js
    Navbar.module.scss

/pages
  /home
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.module.scss
    index.page.js <-- UPDATED
    Home.js
    Home.scss

  /about
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.module.scss
    index.page.js <-- UPDATED
    About.js
    About.module.scss

  _app.page.js
  _document.page.js

あなたがこれをするとき、あなたはまた、あなたを更新する必要があることを心に留めておいてください_document.js and _app.js to _document.page.js and _app.page.js , それぞれ.
私が更新しなければならなかったもう一つは、コンポーネントレベルのスタイリング用のCSSモジュールです.もう一つのポストのそれの上でより多く.