Built-in Components

Next.js itself comes with several built-in components which simplifies implementing some common UI optimizations. These include:

Images: The Image Component is an abstraction of the native HTML <img> element. It automatically lazy loads images, meaning images are loaded only when they are about to be displayed on the screen, reducing initial page load times. In addition, the Image Component automatically resizes images based on the device size.

Link: The Link Component is an abstraction of the native HTML <a> (anchor) tags. The Link Component prefetches the linked pages in the background, anticipating user interactions and loading the necessary page data in advance.

Scripts: The Script Component is an abstraction of the native HTML <script> tags. It allows developers to control the loading and executing third-party scripts.

Code-splitting: Each file in the pages/ directory is automatically code split (splitting the app bundle into smaller chunks) during the build step. This reduces initial load time by only loading required code.

Fonts

Fonts: After creating a CSS file for the font import, add the ‘font-display’ property to the @font-face rule for the browser to display the font according to the font-display property value set.

The font-display property has the following values:

1. auto: This is the default value. It allows the browser to use its default behavior for font loading, which typically depends on the user's browser settings. It often results in a flash of unstyled text (FOUT) while the font is loading.
2. block: This value is similar to auto, but it blocks rendering text until the custom font is fully loaded. It prevents the flash of unstyled text but may lead to a longer delay in rendering text.
3. swap: With this value, the browser will display fallback fonts immediately and swap to the custom font once it's downloaded. This is a good option to provide a better user experience, especially for faster text rendering.
4. fallback: This value is similar to swap, but it allows the browser to use the fallback font if the custom font is not available or takes too long to load.
5. optional: The optional value allows the browser to use the custom font if it's available and downloaded quickly. Otherwise, it will use the fallback font without waiting for the custom font to load.

For example, to set the font-display to swap:

Deployment

The deployment process varies depending on the hosting provider chosen. An estimate of what the process looks like is as follows:

1. Build the Production Version:

   • Before deploying, we must build the production version of the app. Open the terminal or command prompt, navigate to the project directory, and run the following command:

     npm run build