Next.js Mastery: From Fundamentals to Full-Stack

Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

Font Parameters
After understanding the two main uses of next/font, let's dive into the detailed parameters of the Font function:
import { Inter } from 'next/font/google';
﻿
const inter = Inter({
  subsets: ['latin'],
  // What other parameters can be used here?
});
next/font/google and next/font/local have slight differences. Here's a comparison:
Key
font/google
font/local
Type
Required
src
❌
✅
String or Array of Objects
Yes
weight
✅
✅
String or Array
Conditional
style
✅
✅
String or Array
-
subsets
✅
❌
Array of Strings
-
axes
✅
❌
Array of Strings
-
display
✅
✅
String
-
preload
✅
✅
Boolean
-
fallback
✅
✅
Array of Strings
-
adjustFontFallback
✅
✅
Boolean or String
-
variable
✅
✅
String
-
declarations
❌
✅
Array of Objects
-
1. src Parameter
In next/font/local, the src parameter is required and can either be a string or an array of objects (type: Array<{path: string, weight?: string, style?: string}>). The path is relative to where the font-loading function is called.
For example, if you call src: './fonts/my-font.woff2' in app/page.js, then my-font.woff2 should be placed in the app/fonts/ directory.
2. weight
This parameter refers to the font weight, related to the font-weight CSS property. If you're using a variable font, this is optional; if you're not using a variable font, it's required.
The value can be a string, such as weight: '400' or weight: '100 900' (for variable fonts, representing a range from 100 to 900), or an array of strings, such as weight: ['100', '400', '900'] (for non-variable fonts with three possible weights).
3. style
This parameter is related to the font-style CSS property, with a default value of normal. Other possible values include italic and oblique. If you're using a non-variable font with next/font/google, you can also pass an array of styles, such as style: ['italic', 'normal'].
4. subsets
The concept of subsets was discussed in the previous section, so I won't go into further detail here.
5. axes
axes (the plural of axis) is used only in next/font/google. As discussed, variable fonts allow you to adjust properties like width, weight, and slant, providing different appearances from a single font. Width, weight, and slant are examples of "variation axes." For example, the Inter font includes multiple variation axes:
﻿
The axes parameter is an array of strings, such as axes: ['slnt'], which you can find on the Google Variable Fonts page for each font. The reason for declaring this is that, by default, only the weight axis is retained to reduce the font file size. If you need other axes, you must declare them explicitly.
6. display
This parameter relates to the font-display CSS property. By default, when a font is being loaded, the text that uses the font will initially display as blank until the font has finished downloading. The font-display CSS property controls this process. The values for font-display include auto, block, swap, fallback, and optional, which correspond directly to the values in the next/font component's display property.
The default value for font-display is auto, and the default value for the next/font component is swap.
7. preload
This is a boolean parameter that specifies whether the font should be preloaded. The default value is true.
8. fallback
This parameter specifies the fallback fonts to use if the main font cannot be loaded. It does not have a default value and is an array of strings, such as fallback: ['system-ui', 'arial'].
9. adjustFontFallback
For next/font/google, adjustFontFallback is a boolean value that determines whether automatic fallback fonts should be used to reduce cumulative layout shifts. The default value is true.
For next/font/local, adjustFontFallback can be a string or false. Possible values include Arial, Times New Roman, or false. The default is Arial.
Arial is a classic sans-serif font, while Times New Roman is a classic serif font. This option allows you to choose between serif or sans-serif fallback fonts, or you can choose not to adjust by setting it to false. Google Fonts don't require this choice because Next.js automatically determines the best fallback for you.
10. variable
This parameter relates to CSS variables. Let's quickly review the concept of CSS variables.
CSS variables are defined by the developer, typically with a custom property marked with a specific value (e.g., --main-color: black;). The var() function is then used to retrieve the value (e.g., color: var(--main-color);).
The benefits are twofold:
Reusability: If a color value is used in multiple places and needs to change, updating the variable value once will propagate the change everywhere.
Semantic clarity: A variable like --main-text-color is more understandable than #00ff00. Custom properties are subject to cascading and are inherited from their parent.
For example, if you declare a CSS variable on the html element:
html {
  --main-bg-color: brown;
}
Elements that need to use this color can access it like this:
p {
  background-color: var(--main-bg-color);
}
When using next/font, you can declare a CSS variable with the variable property:
// app/page.js
import { Inter } from 'next/font/google';
import styles from '../styles/component.module.css';
 
const inter = Inter({
  variable: '--font-inter',
});
This creates a CSS variable --font-inter, and its specific value can be viewed after adding it to the HTML:
(Insert image showing the generated font names)
The __Inter_a64ecd and __Inter_Fallback_a64ecd are custom font names automatically generated by Next.js:
/* latin */
@font-face {
  font-family: '__Inter_a64ecd';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2) format('woff2');
  //...
}
﻿
@font-face {
  font-family: '__Inter_Fallback_a64ecd';
  src: local("Arial");
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%
}
So --font-inter: '__Inter_a64ecd', '__Inter_Fallback_a64ecd'; essentially declares two custom fonts.
Note: If you don't want __Inter_Fallback_a64ecd and only want __Inter_a64ecd, set adjustFontFallback to false.
﻿
This is just the declaration; to use it, you need to apply the font with the var() function, placing the two fonts in the font-family property:
// styles/component.module.css
.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}
The final step is to add the declaration to the parent element and apply the custom text style to the child element so that it can access the variable declared in the parent:
// app/page.js
<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>
Sometimes, for convenience, this declaration is added directly to the html element so that all elements can use it:
// layout.js
import './globals.css'; 
import { Inter } from 'next/font/google';
﻿
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});
﻿
export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable}`}>
      <body>{children}</body>
    </html>
  );
}
11. declarations
In the previous section, we saw the automatically generated @font-face content by Next.js:
@font-face {
  font-family: '__Inter_a64ecd';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2) format('woff2');
  //...
}
The @font-face rule has many properties, including some that might be unfamiliar, such as ascent-override, descent-override, font-feature-settings, font-variation-settings, line-gap-override, and unicode-range. You can check out MDN's @font-face documentation for more details.
The declarations property allows you to further customize the generated @font-face rules. Here's an example:
declarations: [{ prop: 'ascent-override', value: '90%' }]
Note that this property is only used in next/font/local.
﻿
﻿
﻿
﻿
﻿
﻿
﻿

Key	font/google	font/local	Type	Required
src	❌	✅	String or Array of Objects	Yes
weight	✅	✅	String or Array	Conditional
style	✅	✅	String or Array	-
subsets	✅	❌	Array of Strings	-
axes	✅	❌	Array of Strings	-
display	✅	✅	String	-
preload	✅	✅	Boolean	-
fallback	✅	✅	Array of Strings	-
adjustFontFallback	✅	✅	Boolean or String	-
variable	✅	✅	String	-
declarations	❌	✅	Array of Objects	-

Introduct

Initialization

App Router

Linking and Navigating

Routes

Route Handlers

Middleware

Rendering | CSR SSR SSG ISR

Rendering | RSC & SSR

Rendering | Suspense & Streaming

Rendering | Server & Client Component

Rendering | SSR Strategies

Data Fetching | Caching & Redirect

Caching

Server Actions

Styling

Configuration

Image

Font

Next.js Mastery: From Fundamentals to Full-Stack

Font Parameters

1. src Parameter

2. weight

3. style

4. subsets

5. axes

6. display

7. preload

8. fallback

9. adjustFontFallback

10. variable

11. declarations