Understand the meaning of the icons generated by Next.js in development mode
When using the Next.js application, do you see a small icon at the bottom right of the page that looks like a lightning bolt?
If you hover it over, it will display "Prerendered page":
This icon, this isOnly visible in development modeOf course, telling you that the page meets the conditions of automatic static optimization, which basically means that the page does not depend on the data that needs to be obtained at the time of the call, and it can be pre-rendered and built as a static HTML file at build time (when we runnpm run build).
You can pass the missinggetInitialProps()The method of attaching to the page component.
In this case, our page can even be faster because it will be served statically as an HTML file, rather than through a Node.js server that generates HTML output.
Another useful icon that may appear next to it, or instead of it on a non-priority page is an animated triangle:
This is a compile indicator. When you save the page and Next.js is compiling the application, the prompt will automatically appear before the hot code reloading starts to reload the code in the application.
This is a very good way to immediately determine whether the application has been compiled, and you can test the part of the application you are working on.
Download mine for freeNext.js manual
More tutorials next:
- Getting started with Next.js
- Next.js vs Gatsby vs create-react-app
- How to install Next.js
- Use links to link two pages in Next.js
- Dynamic content in Next.js in the router
- Use getInitialProps to feed data to Next.js components
- Use CSS to style Next.js components
- Prefetch content in Next.js
- Use a router to detect active links in Next.js
- Check the source code to confirm that SSR is working properly in Next.js
- Next.js: Fill the head tag with a custom tag
- Deploy the Next.js application now
- Next.js: Only run code on the server or client side of Next.js
- Deploy Next.js application in production
- How to analyze Next.js application bundles
- Lazy loading module in Next.js
- Add a wrapper component to your Next.js application
- Add Next.js to the icon in your application
- Next.js application bundle
- How to use Next.js router
- How to use Next.js API routing
- How to get cookies on the server side in Next.js application
- How to change the Next.js application port