Next.jsを使ってみる - k01ken’s b10g

開発環境は、Windows 10 Pro(64bit)。

■環境を整える

1.公式サイトへアクセスし、Start Learningボタンをクリック
f:id:k01ken:20210523223623p:plain

2.公式サイトのチュートリアルに倣って、Cドライブ直下に移動して、以下のコマンドを入力。パッケージのインストールが開始されます。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

3.以下のコードを入力して実行

cd nextjs-blog
npm run dev

Webブラウザ上から、localhost:3000にアクセスします。そうすると、以下のように表示されます。
f:id:k01ken:20210523224607p:plain

■ちょっとだけ編集してみる

Welcome to Next.js!という部分を書き換えてみたいと思います。
まず、このプロジェクトのディレクトリのpagesディレクトリのindex.jsを開きます。
className="title"のh1ブロック内部を書き換えます。書き換えて、ファイルを保存すると、自動的に切り替わります。
f:id:k01ken:20210523230035p:plain

■新しいページを追加する

1.新しいページを追加するために、いったん、サーバーを止めて、以下のコマンドを入力します。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/navigate-between-pages-starter"

2.pagesディレクトリ内部に、postsディレクトリを作成し、その中の以下のコードをfirst-post.jsという名前で保存します。

export default function FirstPost(){
  return <h1>First Post</h1>
}

3.もう一度、サーバーを立ちあげて、localhost:3000/posts/first-postにアクセスすると以下のように表示されます。
f:id:k01ken:20210523231306p:plain

■リンクを貼る

index.jsから、先ほど作ったfirst-post.jsへ、逆に、first-post.jsからindex.jsへ相互にリンクを作ります。

1.index.jsを開いて、以下のコードを追加

import Link from 'next/link'

// h1タグの className="title"の中身をすべて置き換え
Read{' '}
<Link href="/posts/first-post"><a>this page!</a></Link>

2.first-post.jsを書き換える

import Link from 'next/link'

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

これで、それぞれのページにリンクが貼られたと思います。
この続きは、自分で、チュートリアルページをやってみてください。