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

posted with ヨメレバ

Amazonで見る

Kindleで見る

点数
感想
基本

点数

84点

感想

Next.jsの基礎がわかりやすく説明されていた。

最低限の使い方としては、本書の内容で十分だと思う。

基本

環境構築

npx create-next-app next-portfolio --use-npm
cd next-portfolio
不要ファイルを削除
rm -rf pages/api/ pages/_document.js styles/Home.module.css
pages/index.jsとstyles/globals.cssの中身を削除する。
rm pages/index.js styles/globals.css
touch pages/index.js styles/globals.css
pages.index.jsを以下の内容にし、npm run devで確認

const Index = () => {
  return (
    <h1>Index</h1>
  );
};
export default Index;

CSS

全体に適用するCSSはpages/_app.jsでimportする。
node_modules配下のCSSファイルはimport文でインポートすることができる。
import '@xxx/yyy.css'
として
<h1 className="h1-style">Hello</h1>
https://nextjs.org/docs/basic-features/built-in-css-support
node_modules配下以外のCSSファイルはインポートすることができない。
CSS Modulesを使うと、コンポーネント毎にCSSファイルをインポートすることができる。

CSS Modules

.h1Text {
  color: red;
}

import styles from '../styles/index.module.css'

const Index = () => {
  return (
    <h1 className={styles.h1Text}>Index</h1>
  );
};
export default Index;

Linkコンポーネント

import Link from 'next/link'
import styles from '../styles/index.module.css'

const Index = () => {
  return (
    <>
      <h1 className={styles.h1Text}>Index</h1>
      <Link href="/contact">contact</Link>
    </>
  );
};
export default Index;

<a href=”/contact”>contact</Link> でも動作はするが、画面が更新されるためスピードが遅くなる。

getStaticProps

静的にpropsやルートを定義するために、getStaticProps関数, getStaticPaths関数, getServerSideProps関数が用意されている。
pagesディレクトリ内のコンポーネントにgetStaticProps関数を定義すると、ビルド時にデータを取得しコンポーネントのpropsとして扱えるようになる。
getStaticProps関数とgetStaticPaths関数はSSGで、getServerSideProps関数はSSRで使うものなので、SPAでは使うことはないと思う。
getStaticProps関数はビルド時に1回だけ実行される。
getServerSideProps関数はリクエスト毎に実行される。

import Link from 'next/link'

const Contact = (props) => {
  return (
    <>
      <p>staticText: {props.staticText}</p>
      {props.posts.map(post => <p key={post.id}><Link href={`/detail/${post.id}`}>{post.title}</Link>: {(new Date(post.created_at)).toLocaleString()}</p>)}
    </>
  );
};
export default Contact;

export async function getStaticProps() {
  const res = await fetch('https://qiita.com/api/v2/items');
  const posts = await res.json();
  return {
    props: {
      staticText: 'テストデータ',
      posts: posts,
    }
  }
}

ダイナミックルーティング

pagesディレクトリ配下に[id].jsのようなファイルを作成すると、[]の中が動的なURLとなる。
mkdir pages/detail; touch pages/detail/[id].js
[]内の値はuseRouterメソッドを使って取得することができる。
※ただし、そのままだとuseRouter().queryがundefinedになることがあるので、useEffect()内でisReadyメソッドで判定する必要があるとのこと。
[参考サイト] https://craftime.net/posts/nextjs-get-query-parameters#useRouter

import { useRouter } from 'next/router';
import { useEffect,useState } from 'react';
import Link from 'next/link'

const SinglePost = () => {
  const [post, setPost] = useState({ title: '', body:'' });
  const router = useRouter();
  useEffect(() => {
    if (router.isReady) {
      fetch(`https://qiita.com/api/v2/items/${router.query.id}`)
        .then(res => res.json())
        .then(json => setPost(json));
    }
  }, [router]);
  return (
    <>
      <p>{post.title}</p>
      <pre>{post.body}</pre>
      <Link href="/contact">contact</Link>
    </>
  );
};
export default SinglePost;