Next static chunks
What is Static Site Generation of Next.js?
Hello, I am Hiro.
I am a student of web development in Vancouver.
Do you know what is Next.js?
This has good features for developing front-end.
I would like to show you basic features of this good technology.
But, I would like to show you what is react.js before I explain it.
SPA has only one page in the application file and connect to backend server via JSON data format. React gets the data and renders it to HTML dom. If you use it, you can create the loose coupling application which is easy to maintain.
But, this framework has the problem about SEO.
The application created by react has only one html file and simple html dom. For example, if you create the application by using Create React App(CRA) which is provided by Facebook, you can see simple html dom like this.
public/index.html
That includes one simple div tag.
Other html doms are created by react components called JSX.
This is good, but when it comes to SEO, this feature causes the problem that Google Crawler does not understand the web page contents.
There is no problem with Business or Administrator application because these web applications are not impor
How to skip Next.js middleware for static and public files
Next.js middleware is incredibly powerful, but by default it runs on more requests than is normally necessary. To see this in operation, you can add a easy logger:
The log shows several static assets that you probably don't want to process in your middleware, and doing so could break your application. To solve this, you can configure a matcher, which tells your middleware to only run on requests that match a certain pattern.
To prevent middleware from running on static files, you can employ a simple trick: static files have a in the lane, while dynamic files do not.
With a regular expression, you can configure middleware to run on every file that does not contain a :
With this matcher, the log only shows one request:
This matcher is a fantastic starting point that minimizes middleware invocation. As your application grows, though, you may need to tweak it. Below are the two most common revisions.
Including some static assets
The easiest way to include some static assets in middleware is to retain the exclusionary regular expression, but specify an additional matcher. Here's a sample that
Static Site Generators (SSGs) are tools for producing HTML in advance so a server can efficiently send the same content to all visitors without creating it first. Unlike dynamic web pages, where a server may query a database on page load and populate templates, an SSG pre-builds the files so that when you deploy them, the server has less work to do when your website is visited.
SSGs have several benefits, such as faster loading time and better visitor user experience. For developers, scalability is also convenient with static sites as you can cache and serve entire websites in Content Delivery Networks (CDNs) instead of deploying more servers. With no server-side processing or database interactions, static sites are more resilient to security vulnerabilities like SQL injection or cross-site scripting (XSS) attacks.
In this article, we will create a Next.js application and use the default rendering mode to create a static site that is performant and efficient.
Setting up a Next.js app on Vultr
To begin, deploy a server using the NodeJS image by following the steps in Deploying a server on Vultr section in our previous article. Next, let's proceed to access the server terminal
cssChunking
This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.
CSS Chunking is a strategy used to improve the performance of your web application by splitting and re-ordering CSS files into chunks. This allows you to load only the CSS that is needed for a specific route, instead of loading all the application's CSS at once.
You can control how CSS files are chunked using the option in your file:
Options
- (default): Next.js will try to merge CSS files whenever possible, determining explicit and implicit dependencies between files from import order to reduce the number of chunks and therefore the number of requests.
- : Next.js will not attempt to merge or re-order your CSS files.
- : Next.js will load CSS files in the correct order they are imported into your files, which can lead to more chunks and requests.
You may consider using if you run into unexpected CSS behavior. For example, if you import and in different files using a different order ( before , or before ), will merge the files in any order and assume there are no dependencies between them. However, if depe
assetPrefix
Attention: Deploying to Vercel automatically configures a global CDN for your Next.js project. You do not need to manually setup an Asset Prefix.
Good to know: Next.js 9.5+ added support for a customizable Base Path, which is better suited for hosting your application on a sub-path like . We do not suggest you use a custom Asset Prefix for this use case.
Set up a CDN
To set up a CDN, you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on.
Open and add the config based on the phase:
Next. path ( folder). For example, with the above configuration, the following request for a JS chunk:
Would instead become:
The exact configuration for uploading your files to a given CDN will depend on your CDN of choice. The only folder you need to host on your CDN is the contents of , which should be uploaded as as the above URL request indicates. Do not upload the rest of your folder, as you should not expose your server code and other configuration to the public.
While covers requests to , it does not influence the following paths:
- Files in the public folder; if you want to serve those assets over a