Next.jsで画像を使う方法2020年12月版

Next.jsで画像を使う方法2020年12月版

Next.js で背景画像を指定しようとしたところ、いろいろ情報が錯綜していてハマりました。

tl;dr

Next.js の Built-in CSS の機能を使いましょう。

もうちょっと詳しく

ディレクトリ構成は以下のような感じにしました。

./
├ assets/
│└ images
│　└ bg.jpg
├ pages/
│├ about.tsx
│├ index.tsx
│└ _app.tsx
└ styles/
　└ styles.scss

index.tsx, about.tsx などは変更はなし。

あらかじめ、sass をインストールしておきます。

$ yarn add sass

https://nextjs.org/docs/basic-features/typescript#custom-app を参考に _app.tsx を新規作成して、 以下のようにします。

import '../styles/styles.scss'
import type { AppProps /*, AppContext */ } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp

1行目で scss をインポートしました。_app.tsx でインポートすることで、サイト全体に SCSSが効くらしい。

で、肝心の styles.scss の中身はこんな感じ。

body {
    background-image: 
        url('../assets/images/elia-clerici-XIrIWKCQykg-unsplash.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

ビルドして表示してみましょう。

$ yarn dev

以下余談

「nextjs background image」などで検索すると、@zeit/next-cssを使う方法だとか、next-imagesを使えとか、ノイズが多かったので、最初は試行錯誤しました。

いろいろ紆余曲折あって、Next.js 自体が対応されたという認識です。