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へアクセスし、下記の画面が表示される
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が表示される