Original link: https://www.ixiqin.com/2023/05/07/for-the-next-js-and-git-commit-version-number/
When developing a server-side application, due to the characteristics of the server-side application itself, there is actually no clear concept of a version. After all, there is no need for a special download, and theoretically it is the latest every time, so there is no concept of version.
But in the actual development and debugging process, we really need to pay attention to the concept of version, because it will affect the specific form of expression, so we need to have a version number concept of front-end and back-end coordination to help us better locate the problem and avoid front-end and back-end wrangling between.
A better idea is that although the server does not have the concept of a version number, most of the time there will be a corresponding Commit ID (after all, it is quite rare for development projects to use no version control tools at all). Therefore, you can choose to use the Commit ID as the version number to output, so that collaborators can know the version currently running online, which is convenient for debugging.
In actual implementation, there are two ways:
1. Put the Commit ID in the Header
I usually use the API Route provided by Vercel and Next.js as a simple serverless FaaS environment, so one requirement is to return a specific Commit ID in the API Route. In order to avoid intrusion into the code, it is more appropriate to put it in the Response Header.
Add the finished effect.
And if you want to add a specific Header to the return result under a specific route like me (for example, x-build-sha in the screenshot above is the Header of the Commit ID I added), you need to use the next.js provided by Next.js Define Header capabilities .
Add a custom header to a specific path by adding specific configurations to the header attribute in next.config.js .
module.exports = { async headers() { return [ { source: '/about', headers: [ { key: 'x-custom-header', value: 'my custom header value', }, { key: 'x-another-custom-header', value: 'my other custom header value', }, ], }, ]; },};
The key here is source field, which defines which routes will return a specific Header. For example, the above configuration is to only add a specific Header to /about . You can use /:path* to match all routes, so as to add specific headers to all routes.
Taking me as an example, the configuration I run online is actually the following configuration:
/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, async headers() { return [ { source: '/:path*', headers: [{ key: 'X-Build-SHA', value: process.env.VERCEL_GIT_COMMIT_SHA }] } ]; }}module.exports = nextConfig
In the above configuration, I configured an x-build-sha header for all paths, and extracted the VERCEL_GIT_COMMIT_SHA variable ( this variable points to the specific Commit ID in the Vercel deployment environment ) from the variables of the process. value, returns it.
2. Put the Commit ID in the UI
In addition to returning in the Header, if you need to go to the Debug UI, the version number is also important. At this time, you can choose to put the Commit ID on the interface, so as to quickly find the Commit ID.
On Next.js deployed by Vercel, there are a batch of environment variables belonging to the Next.js framework , which can be directly referenced in the UI (the above VERCEL_GIT_COMMIT_SHA cannot be directly referenced in the UI).
Just add SHA: {process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA} at a specific location to display the specific Commit ID.
(In addition to Next.js, other frameworks also have similar framework variables that can be used, and you can choose according to your needs).
Summarize
When debugging on the server side, returning your Commit ID in some way can effectively help quickly locate the problem. Try adding this Commit ID to your Next.js to speed up your troubleshooting~
This article is transferred from: https://www.ixiqin.com/2023/05/07/for-the-next-js-and-git-commit-version-number/
This site is only for collection, and the copyright belongs to the original author.