Max Next – Section 7 – Optimizing NextJS Apps


Updated Jul 15th, 2021

Table of Contents

Chapter Details

Chapter 123. Module Summary

Adding metadata and head tags for Google. How to reuse components and config. Also look at images in the best possible way.

Chapter 124. Analyzing the Need for “head” Metadata

Extra data we want to provide. Enhances user experience for example title and crucial for search engines.

Chapter 125. Configuring the “head” Content

Add in a nextJs with help of special “Head” component we import fr ‘next/head.’

Note that it is used with capital Head tags and not lowercase head tags.

Next will inject what is inside of here. Add a title tag and a meta tag with a “name” attribute of description and a “content” attribute of whatevs.

The “content” attribute is what shows up on the search engine results.

Chapter 126. Adding Dynamic “head” Content

Good for dynamic pages.

Import Head from next/head and use {event.title} inside of the title tag to use dynamic data.

Can also use a template literal inside of backticks to render say posts in month/year.

Notice that filtering we don’t see in page source.

Chapter 127. Reusing Logic Inside A Component

Typically want to set up Head content in every page and every if branch for very specific content.

Reuse but not copy.

Set up once at the top a constant pageHeadData variable that can be referred to later down in code in the return statements inside of curly brackets and inside of Fragment tags.

If you get an error can also create a pageHeadData variable using let up at the top and have default values that will be later overwritten based on whether we have data or not.

Chapter 128. Working with the “_app.js” File (and Why)

The “_app.js” file is the root app component that is displayed for every page rendered.

Can also use Head inside of “_app.js” file and use generic settings to pass to all page components.

Add the above code once inside of Head tags and now in all pages.

Meta name=”viewport” content=” initial-scale=1.0, width=device-width”

Chapter 129. Merging “head” Content

NextJS automatically merges Head sections and resolves conflicts by taking the latest element.

This is great because we can have general title in _app.js and override with page-specific data

Chapter 130. The “_document.js” File (And What It Does)

Another file to set application wide settings. Has to be in pages folder and is not there by default but if there will be taken into account. Think of “_app.js” file as root component inside of body section html document and “_document.js” allows you to customize the entire html document, all the elements that make up the html document.

Import Document from next/document and Add a special component, a class-based component MyDocument that extends Document.

Inside we add a render method and retune some JSX code. It is special JSX code with a specific structure. Bring in a few things in the import, in addition to Document from next/document. This includes import Document {Html, Head, Main, NextScript} from next/document

Note that this Head from ‘next/document’ is not the same Head from ‘next/head!”

The Head component imported from Next document should only be used in this special _document.js file.

There is a default JSX structure that you can override if you want to.

Export default MyDocument

Add to the Html component a lang attribute set to ‘en’ and now we will see in view source code.

We can also add a self closing div with an id of overlays to the body. This is good in that it allows us to add html outside of application component tree for example for using those elements with React Portals. We can select this div to portal our modals or overlays to this element.

Chapter 131. A Closer Look At Our Images

Basic of any website is optimized images.

He shows In the browser network tab images with sizes of two five and four MB, obviously gigantic. Also always rendered as jpeg, Even though the browser may support webp image format.

This is not okay for production.

Chapter 132. Optimizing Images with the “Next Image” Component & Feature

Very simple to optimize images with NextJS. Import Image from next/image to replace the standard img element and when we do this Next will create multiple versions of our image on the fly when requests are coming in optimized for the operating system and device sizes that are making the request. And then those generated images will be cached for future requests from similar devices.

To enable use Image and copy over source and alt attributes. Now we also need width and height. We need to set to inform the width and height we need. It either takes full width for smaller screen or a fraction of the screen for larger screens.

Width and height values are set as pixels inside curly brackets without the px suffix.

Files in project can have much larger filesizes.

Max shows that the file sizes are now kilobytes instead of megabytes They are webp instead of jpeg. Images also reduced in quality to reduce file size further without impacting the image (quality reduced only to the point that we don’t actually see it).

Can see these optimized images by checking out the next folder.

Besides these size optimizations we also get lazy loading out of the box.

We can still override width and height width of CSS styles. Final styles can still be done with CSS.

Chapter 133. Taking A Look At The “Next Image” Documentation

A lot of props you can configure to fine tune loading, resizing, make it work with cloud image providers, fine tune quality decrease, etc.

Chapter 134. Module Summary

Chapter 135. Module Resources