Next.JS Strange BUG: Hydration failed
Background I was trying to write the Renderer of the article table by myself yesterday. After a certain save, the following error suddenly appeared: Hydration failed because the initial UI does not match what was rendered on the server. Find the official document of the problem First, check the official description of the problem according to the error log: The official blamed this problem on Two possible reasons: - The server side and the browser side are judged in the rendering process, resulting in different rendering results. Common problems are: - Judging whether the window exists outside the React Hook and affecting the return result - The possible reasons not mentioned by the official are: environment variables available only on the server side are used during the rendering process, such as process.e
Using CSP and Nonce in Next.js to prevent XSS attacks
XSS attack XSS attack usually refers to injecting malicious instruction code into the web page by ingenious methods by exploiting the loopholes left in the development of the web page, so that the user loads and executes the code. Common ways to prevent XSS attacks - In the website design stage, you need to pay attention to filtering user input content and coding it - Use dangerouslySetInnerHTML with caution in Next.js - Use appropriate CSP to limit script execution For the third point, you can use Nonce maximizes the difficulty of malicious attacks. What is Nonce Usually, CSP (Content Security Policy) ensures the security of various contents through Host. Therefore, CSP can only "one size fits all" for inline scripts, either execute or block. Based on this, CSP proposed the concept of Nonce: Nonce
Hello World
This is the first post from the Hyper Blog. Writing this blog took me on and off for months. Although it is still not perfect, at least the basic functions are there. The architecture blog is implemented with Next.js, which has the advantage of taking advantage of the advantages of React and the fast response of static HTML. After testing, after being deployed to the server, SSG can greatly reduce the access response delay. At the same time, the entire site adopts the i18n framework for multi-language adaptation, and the content of the article is automatically translated through the Google Cloud Translate API. The front-end editor editor uses editor js for rendering, which can be saved in pure JSON, which is convenient and clean. Of course, there are countless pitfalls during the period, and we will talk about it later. random pictures
Next.js+Docker+Github Actions realize automatic deployment
Next.js configuration: reduce the image size and enable Standalone mode In order to reduce the volume of Next.js after Build, you can directly configure the Standalone mode in next.config.js: [Code block] After configuration, Next.js will automatically be in the build phase Do tree shaking and copy almost all necessary files to /.next/standalone. In the next step, it can be copied directly into the Docker image and pushed to the repo. But it should be noted that: - In Standalone mode, the public and ./next/static folders will not be copied into standalone. Next.js believes that these static files should be distributed by CDN by default, not deployed to the server.
Fix DaVinci Resolve UI scaling issues
When using DaVinci on a 2K+ resolution screen on Windows, the text will be very small. Most tutorials on the web either modify the scaling of the system or set the application high DPI scaling to "system". The former will cause the UI of other programs to be modified, and the latter will cause the font to be very blurred after zooming in. So after some tossing, I found a solution that doesn't blur the font. Post the solution first, and then elaborate on the solution to the problem. Solution Enter env in the Windows search box, and select Environment Variables - New at the bottom. New environment variables Create two new sets of environment variables: After clicking OK all the way, reopen DaVinci - you're done! The UI text is finally clear. The essence of the problem is the QT engine.