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:
- 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.
- 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.
- 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.
- 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.
- 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:
- 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- This will create an optimized production build in the
.nextfolder.
- Choose a Hosting Provider:
- Select a hosting provider to deploy your Next.js app. There are several options, including Vercel, Netlify, AWS Amplify, DigitalOcean, and others.
- Configure Deployment Settings:
- Depending on the hosting provider, the deployment settings may need to be configured. This includes specifying the repository (if using version control), setting the build command (
npm run build), and defining the deployment branch (usually "main" or "master").
- Deploy your App:
- After configuring the deployment settings, initiate the deployment process. The hosting platform will automatically trigger the build and deploy the app based on the specified configurations. A URL will be provided when deployment is complete.
Previous Section
4.6 Error handlingCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.