How next.does work under the hood?

[dufrein]

Summary

I've been working with next for about 3 years now, but I still don't know exactly how it works under the hood (at the moment I'm still working on version 12 of nextjs). I would like to know about two things. The first is about how and what the nextjs code itself does, what basic things it consists of, exactly how it runs on nodejs, how the collector (webpack and turbopack) is involved, etc.. The second thing is how exactly the dev and prod builds are arranged, what is the structure of the build and why is it exactly the same, how are all these files in the next package related to each other, etc. I understand that these are very difficult and at the same time basic questions, but I have not found an answer to them anywhere, please help with this.

Additional information

No response

Example

No response

[icyJoseph]

Next.js is web framework. It gives you a set of tools, not limited to these, but for your question these are relevant:

• React as UI rendering library
• File system routing
• Webpack and Turbopack bundlers
• Node.js and Edge runtimes
• Development Server
• Build step
• Production Server
• Configuration file
• Router/API handlers and middleware/proxy
• Integrates with React Server Components
• TypeScript support w/ E2E safety

This means that in Next.js you can write React code, including React Server Components in App Router, and Next.js is able to put together all of your code, into modules it can use to serve as described by your File system structure.

To put together all of your code, a process known as transpiling/compiling your React (w/ TypeScript perhaps) code is carried out. The idea is to turn your code into code that Node.js and the browser can understand, and it uses React to generate HTML, and generates other assets needed to serve content on a given route, under the umbrella of Webpack or Turbopack.

Next.js is able to do this for development or production environments, with minimal differences in behavior. Going from development to production, goes through a Build step, where Next.js is also able to pre-render certain routes.

Once again, to do this, Next.js has configured Webpack or Turbopack to process your input code, to be used by the Next.js server. Webpack and Turbopack are configured to create import graphs, compile, minify, and write to static files, all of your JavaScript, CSS, etc.

I feel like this is enough to prompt more questions? I am interesting in re-using my answer here, but I want it to be derived from genuine questions a developer might have.

[dufrein]

@icyJoseph Thank you for your reply. you're right, of course I had and had even more questions. If I understood you correctly, do you mind answering new questions? If so, I would be very grateful.
Let's look at SSR mode. I have the following question that bothers me, how does nodejs run the nextjs server? and what is this nextjs server? Is it just some js code that needs to be run in the nodejs environment and it will somehow receive commands to generate ssr pages? does it have to handle api requests in some way? at the same time, should this code generate other code to create a react interface in the browser? I will be glad if you can answer how it works in the nextjs code.

[icyJoseph]

The Next.js server is at the core, a JavaScript file, that node interprets and runs. At build time manifests are generated that strictly define endpoints and assets associated with them. JavaScript, CSS, etc is generated at build time.

At build time, some pages are also pre-rendered. At runtime, when a request arrives that pre-rendered result is sent. If the page is dynamic, it'll be rendered on-demand. If the page was marked for revalidation, it'll be regenerated in the background.

In future versions, soon, Next.js will be able to pre-render static shells of dynamic pages, to serve content instantly, and stream the dynamic data when it is available.

So yeah, the Next.js server has some internal logic to look at the incoming request and decide what to do.

[dufrein]

Thank you. do you know if there is any documentation that would allow you to learn more about this, or is it just about getting into the code yourself?