YouTipNextjs Images And Fonts
Next.js provides built-in image and font optimization features, designed to improve application performance and user experience.
Next.js's image and font optimization features provide developers with powerful tools to build high-performance, user-experience-excellent Web applications.
| Feature | Description |
| --- | --- |
| **Image Optimization** | Use the `` component, supporting local and remote images, automatically optimizing size and loading performance. |
| **Font Optimization** | Use the `next/font` module, supporting Google fonts and local fonts, automatically hosting and optimizing loading. |
| **Static Resource Management** | Put static resources into the `public` directory, access directly via `/filename`. |
* * *
## Static Resource Management
Next.js allows you to store static resources (such as images, fonts, etc.) in the public directory.
These resources can be accessed directly via /filename.
Directory structure example:
my-next-app/├── app/├── public/│ ├── images/│ │ └── logo.png │ └── fonts/│ └── my-font.woff2 ├── package.json └── next.config.js
**public/images/logo.png** can be accessed via /images/logo.png.
## Image Optimization
Next.js provides the `` component for optimizing image loading. It extends the HTML `![]()
` element and provides the following features:
* **Size Optimization**: Automatically provides correctly sized images for different devices, supporting modern image formats (such as WebP).
* **Visual Stability**: Prevents layout shifts during image loading.
* **Faster Loading**: Uses native browser lazy loading, loading images only when they enter the viewport.
* **Resource Flexibility**: Supports on-demand image size adjustment, even for remote images.
### Using the `` Component
Import the `` component from `next/image` and use it in your component.
## Example
import Image from 'next/image';
export default function Page(){
return;
}
### Local Images
Local images can be directly referenced from the public directory.
## Example
import Image from 'next/image';
import profilePic from './me.png';
export default function Page(){
return(
);
}
### Remote Images
Remote images require manually specifying width and height to avoid layout shifts.
## Example
import Image from 'next/image';
export default function Page(){
return(
);
}
### Configuring Remote Images
Configure allowed remote image domains in next.config.js.
## Example
const nextConfig ={
images:{
remotePatterns:[
{
protocol:'https',
hostname:'s3.amazonaws.com',
port:'',
pathname:'/my-bucket/**',
},
],
},
};
export default nextConfig;
* * *
## Font Optimization
Next.js provides the `next/font` module for optimizing font loading. It supports automatic hosting of font files, improving privacy and performance.
### Using Google Fonts
Import fonts from next/font/google and apply them to HTML elements.
## Example
import{ Geist } from 'next/font/google';
const geist = Geist({
subsets:['latin'],
});
export default function Layout({ children }){
return(
{children}
);
}
If using non-variable fonts, you need to specify the weight:
## Example
import{ Roboto } from 'next/font/google';
const roboto = Roboto({
weight:'400',
subsets:['latin'],
});
export default function Layout({ children }){
return(
{children}
);
}
### Using Local Fonts
Import local font files from next/font/local.
## Example
import localFont from 'next/font/local';
const myFont = localFont({
src:'./my-font.woff2',
});
export default function Layout({ children }){
return(
{children}
);
}
If using multiple font files:
## Example
const roboto = localFont({
src:[
{
path:'./Roboto-Regular.woff2',
weight:'400',
style:'normal',
},
{
path:'./Roboto-Italic.woff2',
weight:'400',
style:'italic',
},
{
path:'./Roboto-Bold.woff2',
weight:'700',
style:'normal',
},
{
path:'./Roboto-BoldItalic.woff2',
weight:'700',
style:'italic',
},
],
});