[Next.js] 最速でNext.jsを動かす

注意

現在はNext13がリリースされており、構造が12までと異なります。
詳しくは公式ドキュメントを参照お願いします。

最速でNext.jsを動かす

基本はNextチュートリアル公式を圧縮して書いています。
　
Node公式サイトからNode.jsを端末にインストールする
Node.js 10.13 or 最新バージョン

$ npx create-next-app
? What is your project named? › next-app

$ cd next-app
$ npm run dev

※プロジェクト名は任意の名称に
サーバーを立ち上げたら http://localhost:3000/ にアクセス

編集してみよう

pages/index.js開いて<h1>内をHello Next.js!と編集
保存するとリアルタイムにタイトルが変更される
ここまででNext.jsのアプリが動かせる

ページルーティング

まずリンクをつける方法

モジュールを利用したいコンポーネントファイルに読み込み

import Link from 'next/link';

<Link href="/posts/first-post">
    <a>Link</a>
</Link>

ここで開発ツールで見ると

<a href="/posts/first-post">Link</a>で書き出されている

Linkの中にaタグを入れる理由

• <Link href="">: クライアントサイドで遷移させるため
• <a>: SEO対策 aタグだとBotに理解してもらうため(hrefは不要)

Next.js ではなぜ Link の中にaを入れる？なぜhrefをLinkに付ける？？

ページ追加

/pages/posts/first-post.js追加

import Link from 'next/link';

const FirstPost = () => {
  return (
    <>
        <h1>First Post</h1>
        <h2>
            <Link href="/">
            <a>Back to home</a>
            </Link>
        </h2>
    </>
  );
}

export default FirstPost;

React.Fragmentタグについて

return (
    <> {/* <React.Fragment>...</React.Fragment> */}
        React.Fragmentの省略形
        return内では必ず1個のタグでラップしなければならずdivでくくると
        構造上余計セレクタが含まれてしまうため
        HTMLには反映されないタグが用意されている
    </>
);