Next.jsでQiitaAPIを使って記事情報を取得して表示 Vercel

Next.jsはReactをベースにしたフロントエンドフレームワーク

Vercelにログインして、アプリを作成する。
GitHubにリポジトリを作成できる。publicにもできる。

QiitaAPIを使って記事情報を取得して表示
https://vercel-nextjs3.vercel.app

GitHub
GitHub - hiroyuki12/vercel-nextjs3

$ git clone https://github.com/hiroyuki12/vercel-nextjs3
$ cd vercel-nextjs3
$ npm install
$ npm run dev ($ npm installをしないとエラー)
ソースを更新して保存すると、画面が更新される

$ vi pages/app.js して、(function App()なので、ファイル名をapp.jsに合わせないと表示されない。pagesフォルダにファイルを追加すると/appにアクセスできる)
https://raw.githubusercontent.com/hiroyuki12/vite-react-pages/main/src/components/qiita/App.jsx
の
内容で新規作成。
//import '../../QiitaApp.css';にして、コメントアウト
 vite-react-pages/App.jsx at main · hiroyuki12/vite-react-pages · GitHub

$ npm install axios
$ npm install lodash
$ npm install moment

$ npm run dev

http://localhost:3000/app

$ vi pages/QiitaApp.css して、追加。
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/QiitaApp.css
page/app.jsでimport './QiitaApp.css';にするとエラーになるので、
$ vi page/_app.js して、import './QiitaApp.css'; を追加

$ npx create-next-app vercel-nextjs --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
$ cd vercel-nextjs
$ npm run dev

http://localhost:3000

デプロイの進捗は、Vercelのページで確認できる。

変更してPushすると、VercelのNext.jsが更新される。

ページを追加。pagesフォルダにjsファイルを追加するのみ。function名とファイル名を合わせる
$ vi pages/hello.js

import React from 'react'

function Hello() {
          return <h1>hello page</h1>
}

export default Hello

http://localhost:3000/hello

PWA
iPhoneで表示した時に一番上が白くなってしまう
Next.js環境でのPWA(Progressive Web App)の導入手順

参考
ReactでQiitaAPIから記事情報を取得して表示 - MBP(はてな)

個人開発
個人開発でwebサービスを作ったら人生で初めてバズった話 - Qiita