基本
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でアクセス可能