export default async function Home() {
return (
<main>
<img src="/cat.png" alt="My Cat" />
</main>
);
}
/my-next-app
├── /app
├── /public
│ ├── /cat.png
│ ├── /wolfie.png
│ ├── /font.woff2
├── /components
import Image from 'next/image'
import catPic from './cat.png' // cat.png in public folder
export default async function Home() {
return (
<main>
<Image src={catPic} alt="My Cat" width={500} height={300} />
</main>
);
}
<Image
src="https://s3.amazonaws.com/my-bucket/cat.png"
alt="My Cat"
width={500}
height={300}
/>
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
pathname: '/my-bucket/**',
},
],
},
}
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
// In your component:
<html lang="en" className={roboto.className}>
<body>
{/* ... */}
</body>
</html>
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2', // Font file in public folder
})
// In your component:
<html lang="en" className={myFont.className}>
<body>
{/* ... */}
</body>
</html>