見出し画像

Next.jsを使ってホームページを自動生成。

donguri
Next.jsは、Vercelというホスティングサービスなどを展開する企業が開発している JavaScriptフレームワークです。

静的サイト・ジェネレーターってなんだろうということで解説してあるサイトがあるので貼りつけておきます。

今回はJapaScriptで作られているNext.jsを使ってみます。とっつきやすそうなので。

環境は構築が大変なのでPaizaCloudを使います。

簡単に環境構築できます。node.jsのサーバを作るとこも可能なので手間いらず。

node.jsを選んで新規サーバを作り、ターミナル操作で確認しながら作って行きます。まず確認作業から。

npx -v
6.13.6

と出てくるのでしっかりと入っています。なので

npx create-next-app

として実行します。プロジェクトの名前は"test"としました。これで最後まで処理が進みます。

画像1

"test"とフォルダができています。これだけではまだ完成ではありません。”build”という作業を行う必要があります。それには、testフォルダに移動しないといけません。

cd test

とコマンドを打ち込み実行します。これでtestフォルダに映ることができました。そして　"build"します。

npm run build

これで少し待つと出来上がりです。では。ホームページを立ち上げてみましょう。

npm run start

これで"3000"というところを押すとホームページが立ち上がります。

画像2

このページをCtrl＋Cで一旦終了します。そして次のコマンドを実行します。

npm run dev

こうすることで、開発モードになりリアルタイムで更新するようです。

/pages/index.jsのファイルを編集します。全部消して次のコードに書き換えます。

export default function Home() {
 return (
   <h1>Hello Taro</h1>

画像3

<h1>タグの部分が表示されているのが分かります。

スタイルも指定してみます。ここでは直接タグに入れる方法でやってみます。ファイルに以下を記述します。

export default function Home() {
 return (
   <>
   <h1 style={{color: `red`}}>Hello Taro</h1>
   <p>今日は晴れ</p>
   </>
 )
}
return

で指定できるのは一つのタグなので"<> </>"で囲んだところにタグを書いて行きます。<h1>にスタイルをつけてみます。

style={{color: `red`}}

のように記述します。すると、

画像4

"Hello Taro"が赤くなりました。

次に新しいページを作ります。作る場所は"/pages"の直下に新規フォルダを作り、"about"と名前をつけて、その中に"index.js"というファイルを作ります。その内容は

export default function About() {
 return (
   <>
   <h1>About</h1>
   </>
 )
}

とします。そしてアドレスバーの最後のところを"3000/about"と書いてページを読み込んで表示できるようになりました。

あとはページを行き来できるようにリンクを貼ります。

aboutのページには以下。

import Link from 'next/link'

<Link href={`/about`}><button>トップへ</button></Link>

トップページの方には

import Link from 'next/link'

<Link href={`/`}><button>about</button></Link>

とすれば双方にボタンが現れ押すと遷移できるようになりました！

いいなと思ったら応援しよう！