Next.jsを使ってみる！create next-app

Next.jsとは？

Next.jsは、高速なWebアプリケーションを作成するためのビルディングブロックを提供する柔軟なReactフレームワークです。

最初にディレクトリーを作りましょう

mkdir next-test
cd next-test

Next.jsのプロジェクトを作成します。

npx create-next-app

yarn create next-app

途中でプロジェクトの名前を問われるのですが名前はなんでもいいです。そのまま名前を入れずにEnterを押すとmy-appという名前で新しいディレクトリーが作られて、この中に各ファイルがダウンロードされます。

中身はこんな感じ

.
┝ node_modules
┝ pages
│　┝ api
│　┝ _app.js
│　└ index.js
┝ public
┝ styles
┝ .eslintrc.json
┝ .gitignore
┝ next.config.js
┝ package.json
└ README.md

中身の詳細はまた別で投稿します。

cd my-app
yarn dev

yarn devを行うと、ターミナルで

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1169 ms (124 modules)
wait  - compiling...
event - compiled successfully in 17 ms (97 modules)
wait  - compiling...
event - compiled successfully in 8 ms (27 modules)

と表示されます。　　
http://localhost:3000
リンクにアクセスしましょう！

アクセスすると

と出てきます。