admin管理员组

文章数量:1324876

Sorry if this is some stupid question But How does applications built in NextJS municate with browsers as there is no .html file in the folder structure after creating npx create-next-app.

Sorry if this is some stupid question But How does applications built in NextJS municate with browsers as there is no .html file in the folder structure after creating npx create-next-app.

Share Improve this question asked Jan 9, 2022 at 13:04 Gourav Singh RawatGourav Singh Rawat 4413 gold badges7 silver badges18 bronze badges 2
  • 1 Fundamentally, because the necessary HTML files are generated by the Next.js build process. – T.J. Crowder Commented Jan 9, 2022 at 13:08
  • When building the app (next build), Next.js creates a .next folder which contains the HTML files that are served. – juliomalves Commented Jan 10, 2022 at 9:31
Add a ment  | 

1 Answer 1

Reset to default 6

The index.html file is created after running next build.

The files

The code that you write for Next.js is kind of an abstraction of the website you want to serve in the end.

That means you are writing Javascript code in an easy, convenient way, which has to follow the rules that Next.js has specified. Then you are telling Next.js to pile your code (next build), and Next.js creates the actual website based on your Javascript code.

The website files are created inside the folder /.next, the location of the index.html is /.next/server/pages/index.html. (see Next.js Build API).

(Also note that there might be no index.html file at all, depending on the specified routing and build process. Also the location of the files should be considered an implementation detail, theoretically Next.js might change this behavior at any version upgrade.)

The server

Next.js also provides its own node server, so if you call next start (after next build) it will start its own server, which just knows where to look for the files.

Next.js also defines some routing behind the scenes (based on your /pages folder), which is (kind of) the reason why you are not seeing any index.html in the address bar of the browser.

Static files

If you are using next export instead of next start, then Next.js will create static files, and you will find a folder which contains .html files and all the stuff that you probably were expecting to see, and which can be served by some other static file server. (For this you have to remove at least the <Image> from the project created by create-next-app, because of the limitations of next export)

Remark about index.html

So we found where Next.js creates an index.html file, but also note that - while it makes sense to follow conventions - it would actually not even be necessary to have an index.html file if you are writing your own server, e.g.:

// - save as 'server.js',
// - run 'node server.js'
// - open 'http://localhost:8888/abc' in the browser

const http = require("http");
const url = require("url");

http.createServer(function(request, response) {
    var uri = url.parse(request.url).pathname;
    response.writeHead(200);
    response.write('<html><body>you called the url:' + request.url + '</body></html>');
    response.end();
}).listen(8888);

本文标签: