「はじめてつくるNext.jsサイト」の感想・備忘録2

posted with ヨメレバ

Amazonで見る

Kindleで見る

基本
1. next/image
2. レイアウト
ブラッシュアップ
1. 404エラー画面
  1. SEO
  2. APIルート

基本

next/image

画像のサイズやフォーマット、遅延ローディングなどを全て自動で行ってくれる。
import Image from 'next/image'
として以下で表示。
<Image src="/images/9736.jpg" alt="fumika" width={200} height={150} quality={90} />
width={} height={}ではなくfillを指定すると親要素いっぱいに表示される。
priorityを指定すると遅延ロードされなくなる。
qualityのデフォルト値は75。
Safari以外のブラウザだと、表示される画像はwebp形式となる。
（画像の形式が最適化さる）

レイアウト

touch components/{layout,header,hooter}.js

components/layout.js

import Header from './header'
import Footer from './footer'

const Layout = (props) => {
  return (
    <>
    <Header />
      {props.children}
    <Footer />
    </>
  );
};
export default Layout;

components/header.js

const Header = () => {
  return (
    <header>
      <Link href="/">ヘッダー</Link>
      <hr/>
    </header>
  );
};
export default Header;

components/footer.js

const Footer = () => {
  return (
    <footer>
      <hr/>フッター
    </footer>
  );
};
export default Footer;

pages内のファイル（以下はpages/index.jsの場合）

import Link from 'next/link'
import Image from 'next/image'
import styles from '../styles/index.module.css'
import Layout from '../components/Layout'

const Index = () => {
  return (
    <Layout>
      <h1 className={styles.h1Text}>Index</h1>
      <Image src="/images/9736.jpg" alt="fumika" width={200} height={150} quality={90}  />
      <Link href="/contact">contact</Link>
    </Layout>
  );
};
export default Index;

ブラッシュアップ

404エラー画面

touch pages/404.js

import Layout from '../components/Layout'

const NotFound = () => {
  return (
    <Layout>
      <h1>ページが見つかりません。</h1>
    </Layout>
  );
};
export default NotFound;

SEO

next/headで各ページに<Head>を記述することができるが、SEO用のコンポーネントとして<Head>を定義すると管理しやすくなる。
touch components/seo.js

import Head from 'next/head'

const Seo = (props) => {
  return (
    <Head>
      <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
      <meta charset="utf-8"/>
      <title>{props.title}</title>
      <meta name="description" content={props.description}/>
    </Head>
  );
};
export default Seo;

pages内のファイルでimportして使用する。
import Seo from '../components/seo'
として
<Seo title="Nextテストサイト" description="これはNextテストサイトです。"/>

APIルート

pages/api/ディレクトリ内のファイルはAPIエンドポイントとして機能する。
これにより、サーバサイドの実装を待たずにフロントエンドの開発を進めることができる。

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}
// http://localhost:3000/api/helloでアクセス可能

const data = [
  {name: 'Donald Trump', period: '2017-2021'},
  {name: 'Barack Obama', period: '2009-2017'},
];
export default function server(req, res) {
  res.status(200).json(data);
}
// http://localhost:3000/api/presidentsでアクセス可能