🚀Astro-notion-blog

Notion記事をAstroを利用してブログ化

next.jsの練習

next.jsが何なのかよくわかってない超初心者ですが、リンク記事を参考にチャレンジ!

Mac内にVoltaがインストールしてある環境にて

プロジェクト作成

対話の中で、構築するフォルダの指定があるので、あらかじめフォルダを作成する必要はない

$ npx create-next-app@latest
…
Initialized a git repository.

Success! Created my-app at /private/tmp/my-app

$ cd my-app
$ tree -L 1
.
├── README.md
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
└── yarn.lock

起動

$ npm run dev
> my-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1499 ms (173 modules)

ブラウザーでhttp://localhost:3000へアクセスし、下記の画面が表示される

Image in a image block

index.js編集

pages/index.jsを編集してみます

export default function Home() {
  return <h1>Hello Next.js</h1>;
}

Hello Next.jsだけ表示される

Aboutページを作成してみる

pagesフォルダ下にabout.jsのファイルを下記の内容で作成

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

http://localhost:3000/about へアクセスすると、About Pageが表示される