🙆‍♀️

基礎から始めるNext.js【１９Next Image 】

2022/11/15に公開

Next.js

tech

基礎から始めるNext.js【１９Next Image 】

YouTube: https://youtu.be/M9Qyro-uFIY

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

基礎から始めるNext.js【１９Next Image 】

Discussion