Next.jsのプロジェクトを作る

記載日 : 2023/1/13

備忘録として、Next.jsでプロジェクトを新規作成する手順を記載します。

環境

OS : Ubuntu 22.04
node.js : 18.12.1　（nodenv使用）
VSCodeインストール済（拡張機能からGit Graphをインストール済）

作業 (計5分)

0.プロジェクトを作成する (5分)

新規プロジェクトを作成する。作成中にESLintを使うか質問されるので矢印キーを使って Yes/No 選択する。

npxを直接使用する場合

npx create-next-app react_try --ts

yarnを使用する場合

yarn create　next-app react_try --typescript

1.Webサーバ起動する

Webサーバ起動する。

npxを直接使用する場合

npx run dev

yarnを使用する場合

yarn dev

http://localhost:3000へブラウザからアクセスするとデフォルト画面を見ることができる。

2.GoogleFontのダウンロードFailedについて

最初のうち、サーバを起動するとGoogleFontsのダウンロードが失敗してしまう事象が起きて悩んだ。（yarn devを実行してから数分待たないと、サーバが起動しなかった。）
以下を試しても上手く動かなかったが、後日再起動したら問題なく動いた。apt updateをしていなかったのが原因だったのかもしれない。
現在は、2.1と2.2のどちらも実施せずとも、問題なくサーバ起動できる。

2.1.optimizeFontsをfalseにする

参考サイトを見て、next.config.jsのnextConfigにoptimizeFonts: falseを追加した。

const nextConfig = {
    reactStrictmode: true,
    optimizeFonts: false // 追記分。
}

2.2.global.cssでGoogleFontをimportする

参考サイトを見て、globals.cssにimportの記述を追加した。
（参考サイトを見ると、推奨できないやり方らしい。）

@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');

参考にさせて頂いたサイト

・Google Fontがダウンロードできないエラーについて
https://stackoverflow.com/questions/72399203/google-fonts-not-loading-in-next-js-when-deployed-to-vercel
https://stackoverflow.com/questions/69388400/nextjs-google-font-is-not-loading-or-displaying-on-the-website

・Next.jsプロジェクトを作る際に、typescriptのものを作るやり方について
https://nextjs.org/docs/basic-features/typescript
https://qiita.com/ekzemplaro/items/a73bb2b1181cd1b5f466