🙆♀️
基礎から始めるNext.js【19Next Image 】
基礎から始めるNext.js【19Next Image 】
YouTube: https://youtu.be/M9Qyro-uFIY
今回はNext.jsの「Image」コンポーネントを使用した
画像の表示方法について解説します。
画像ソースの読み込みにつきましては、
・「public」フォルダ内の画像のパスを設定する方法
・「public」フォルダ内の画像を「import」して設定する方法
・アプリのドメインと異なる別のドメインのパスを設定する方法
等があります。
こちらは動画内で使用しているchakraUIのImageのページになります。
pages/index.tsx
import Link from 'next/link'
import Layout from '../components/Layout'
import { Box, Flex, Heading } from '@chakra-ui/react'
import { ListItem, UnorderedList } from '@chakra-ui/react'
import Image from 'next/image'
import vercelSvg from '../public/vercel.svg'
export default function Home() {
return (
<Layout title="Next App TopPage" content="Generated by create next app">
<Heading as="h1" size="4xl">
Welcome to <a href="https://nextjs.org">Next.js!</a>
</Heading>
<UnorderedList>
<ListItem>
<Link href={'/hello/1'}>to Hellopage</Link>
</ListItem>
<ListItem>
<Link href={'/clientside'}>to Client Side Fetch</Link>
</ListItem>
<ListItem>
<Link href={'/serverside'}>to Server Side Fetch</Link>
</ListItem>
<ListItem>
<Link href={'/ssg'}>SSG Page</Link>
</ListItem>
<ListItem>
<Link href={'/swr'}>SWR Page</Link>
</ListItem>
</UnorderedList>
<Flex mt={3} justifyContent="center">
<Box m="3">
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</Box>
<Box m="3">
<Image src={vercelSvg} alt="Vercel Logo" width={72} height={16} />
</Box>
<Box m="3">
<Image
src="https://bit.ly/dan-abramov"
alt="Vercel Logo"
width={72}
height={16}
/>
</Box>
</Flex>
</Layout>
)
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
typescript: {
ignoreBuildErrors: true,
},
images: {
domains: ['bit.ly'],
},
}
module.exports = nextConfig
Discussion