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

スポンサーリンク

点数

84点

感想

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

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

基本

環境構築

  1. npx create-next-app next-portfolio --use-npm
  2. cd next-portfolio
  3. 不要ファイルを削除
    rm -rf pages/api/ pages/_document.js styles/Home.module.css
  4. pages/index.jsとstyles/globals.cssの中身を削除する。
    rm pages/index.js styles/globals.css
    touch pages/index.js styles/globals.css
  5. 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;

コメント