How does NextJS detects & fetches a new page?

Question

In a fresh NextJS project, I start the dev server by running yarn dev and add the following code to the pages/index.jsx:

export default Home(){
 return <Link href="/abc">Go to abc</Link>
}

Suppose I create a new page in the pages directory called abc.js with the following code:

export default AbcPage(){
 return <div>Welcome to ABC page.</div>
}

By looking at the output in the terminal, it seems the new page has not been compiled yet, and the moment I click on the abc in the home page, compilation happens and a abc.js chunk is downloaded in the browser.

My question is, how did NestJS configure webpack to load chunks on-demand?

Some relevant files I looked into are:

• packages/next/build/webpack/loaders/next-client-pages-loader.ts
• packages/next/client/index.tsx
• packages/next/client/page-loader.ts
• packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

It seems the last one in the above list holds the key to my question. I also https://github.com/webpack/webpack/issues/1422.

Answer 1

For anyone wondering the same in the future, I have finally cracked what's going under the hood and trying to compile it here.