NEXT.jsのチュートリアル(Vercelでデプロイするまで)①日付の表示変更まで

チュートリアルで気になったところのメモです。


https://nextjs.org/learn/basics/create-nextjs-app

---
### 動的ルーティング(Dynamic Routing)で404エラー

![スクリーンショット_2022-03-16_21.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/606540c8-771a-f3ff-ff98-88780d194bd8.png)

こちらはエンジニアコミュニティの方にアドバイス頂いたところ、`[id].js` の`[` の前に半角スペースが入っていたのでルーティングができてませんでした。
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/edf6cecf-46fa-d8e1-16fb-08abcce93887.png)

修正したら無事にブログの個別記事が表示されました。

![0FC3AF41-76F4-4AA4-9240-FFB89E499E6C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/ea347f58-c609-b325-0cf1-43c6d874eaba.jpeg)

### ブログの個別記事
- どちらもpostsフォルダ(プロジェクト直下)内のmdファイル内のタイトルと年月日を表示しています。
- 日付表示はdate-fns、mdファイルをHTMLに変換するためremark-htmlを使用しています。
- プロフィール画像はpublic内に画像用フォルダを用意してそちらから表示
- lib/post.tsxはファイルをからデータを取得するためのライブラリ

### npmコマンド

```bash
% npm run build

> build
> next build

info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (5/5)
info  - Finalizing page optimization  

Page                                       Size     First Load JS
┌ ● / (585 ms)                             1.57 kB        84.7 kB
├   /_app                                  0 B            70.9 kB
├ ○ /404                                   194 B          71.1 kB
└ ● /posts/[id] (1181 ms)                  1.33 kB        84.4 kB
    ├ /posts/ssg-ssr (598 ms)
    └ /posts/pre-rendering (583 ms)
+ First Load JS shared by all              70.9 kB
  ├ chunks/framework-5f4595e5518b5600.js   42 kB
  ├ chunks/main-01df828e572375b9.js        27.6 kB
  ├ chunks/pages/_app-73483fad2904193b.js  508 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/bc3a89dd4df1c87b.css               251 B

○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
```

`npm run start`したらこんな警告が出ました。

```bash
% npm run start 

> start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
```

https://nextjs.org/docs/messages/sharp-missing-in-production

package.json⇒scripts⇒startのnext startを本番環境で使うならsharpの導入をおすすめしますとのこと。

```bash
{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "date-fns": "^2.28.0",
    "gray-matter": "^4.0.3",
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1"
  }
}
```

### Sharpの導入
`yarn add sharp`した

https://yarnpkg.com/package/sharp

<details><summary>ログ</summary>  
  
    % yarn add sharp
    yarn add v1.22.15
    info No lockfile found.
    warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    info @next/swc-linux-arm-gnueabihf@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-linux-arm-gnueabihf@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-linux-arm-gnueabihf@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info @next/swc-linux-arm64-gnu@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-linux-arm64-gnu@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-linux-arm64-gnu@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info @next/swc-darwin-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info "@next/swc-darwin-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-android-arm64@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-android-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-android-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info @next/swc-linux-arm64-musl@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-linux-arm64-musl@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-linux-arm64-musl@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info @next/swc-win32-ia32-msvc@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-win32-ia32-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-win32-ia32-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
    info @next/swc-linux-x64-musl@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-linux-x64-musl@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-win32-x64-msvc@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-win32-x64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-linux-x64-gnu@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-linux-x64-gnu@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-win32-arm64-msvc@12.1.0: The platform "darwin" is incompatible with this module.
    info "@next/swc-win32-arm64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
    info @next/swc-win32-arm64-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    warning Your current version of Yarn is out of date. The latest version is "1.22.18", while you're on "1.22.15".
    info To upgrade, run the following command:
    $ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
    success Saved 141 new dependencies.
    info Direct dependencies
    ├─ date-fns@2.28.0
    ├─ gray-matter@4.0.3
    ├─ next@12.1.0
    ├─ react-dom@17.0.2
    ├─ react@17.0.2
    ├─ remark-html@15.0.1
    ├─ remark@14.0.2
    └─ sharp@0.30.3
    info All dependencies
    ├─ @next/env@12.1.0
    ├─ @next/swc-darwin-x64@12.1.0
    ├─ @types/debug@4.1.7
    ├─ @types/mdurl@1.0.2
    ├─ @types/ms@0.7.31
    ├─ ansi-regex@2.1.1
    ├─ aproba@1.2.0
    ├─ are-we-there-yet@1.1.7
    ├─ argparse@1.0.10
    ├─ bail@2.0.2
    ├─ base64-js@1.5.1
    ├─ bl@4.1.0
    ├─ buffer@5.7.1
    ├─ caniuse-lite@1.0.30001319
    ├─ ccount@2.0.1
    ├─ character-entities-html4@2.1.0
    ├─ character-entities-legacy@3.0.0
    ├─ character-entities@2.0.1
    ├─ chownr@1.1.4
    ├─ code-point-at@1.1.0
    ├─ color-convert@2.0.1
    ├─ color-name@1.1.4
    ├─ color-string@1.9.0
    ├─ color@4.2.1
    ├─ comma-separated-tokens@2.0.2
    ├─ console-control-strings@1.1.0
    ├─ core-util-is@1.0.3
    ├─ date-fns@2.28.0
    ├─ debug@4.3.4
    ├─ decompress-response@6.0.0
    ├─ deep-extend@0.6.0
    ├─ delegates@1.0.0
    ├─ dequal@2.0.2
    ├─ detect-libc@2.0.1
    ├─ diff@5.0.0
    ├─ emoji-regex@8.0.0
    ├─ end-of-stream@1.4.4
    ├─ esprima@4.0.1
    ├─ expand-template@2.0.3
    ├─ extend-shallow@2.0.1
    ├─ extend@3.0.2
    ├─ fs-constants@1.0.0
    ├─ gauge@2.7.4
    ├─ github-from-package@0.0.0
    ├─ gray-matter@4.0.3
    ├─ has-unicode@2.0.1
    ├─ hast-util-is-element@2.1.2
    ├─ hast-util-sanitize@4.0.0
    ├─ hast-util-to-html@8.0.3
    ├─ hast-util-whitespace@2.0.0
    ├─ html-void-elements@2.0.1
    ├─ ieee754@1.2.1
    ├─ inherits@2.0.4
    ├─ ini@1.3.8
    ├─ is-arrayish@0.3.2
    ├─ is-extendable@0.1.1
    ├─ is-fullwidth-code-point@1.0.0
    ├─ is-plain-obj@4.0.0
    ├─ isarray@1.0.0
    ├─ js-tokens@4.0.0
    ├─ js-yaml@3.14.1
    ├─ kind-of@6.0.3
    ├─ kleur@4.1.4
    ├─ longest-streak@3.0.1
    ├─ lru-cache@6.0.0
    ├─ mdast-util-definitions@5.1.0
    ├─ mdast-util-from-markdown@1.2.0
    ├─ mdast-util-to-hast@12.1.1
    ├─ mdast-util-to-markdown@1.3.0
    ├─ mdast-util-to-string@3.1.0
    ├─ mdurl@1.0.1
    ├─ micromark-core-commonmark@1.0.6
    ├─ micromark-factory-destination@1.0.0
    ├─ micromark-factory-label@1.0.2
    ├─ micromark-factory-title@1.0.2
    ├─ micromark-factory-whitespace@1.0.0
    ├─ micromark-util-classify-character@1.0.0
    ├─ micromark-util-combine-extensions@1.0.0
    ├─ micromark-util-html-tag-name@1.0.0
    ├─ micromark@3.0.10
    ├─ mimic-response@3.1.0
    ├─ minimist@1.2.5
    ├─ mkdirp-classic@0.5.3
    ├─ mri@1.2.0
    ├─ ms@2.1.2
    ├─ nanoid@3.3.1
    ├─ napi-build-utils@1.0.2
    ├─ next@12.1.0
    ├─ node-abi@3.8.0
    ├─ node-addon-api@4.3.0
    ├─ npmlog@4.1.2
    ├─ number-is-nan@1.0.1
    ├─ object-assign@4.1.1
    ├─ picocolors@1.0.0
    ├─ postcss@8.4.5
    ├─ prebuild-install@7.0.1
    ├─ process-nextick-args@2.0.1
    ├─ property-information@6.1.1
    ├─ rc@1.2.8
    ├─ react-dom@17.0.2
    ├─ react@17.0.2
    ├─ readable-stream@3.6.0
    ├─ remark-html@15.0.1
    ├─ remark-parse@10.0.1
    ├─ remark-stringify@10.0.2
    ├─ remark@14.0.2
    ├─ sade@1.8.1
    ├─ safe-buffer@5.1.2
    ├─ scheduler@0.20.2
    ├─ section-matter@1.0.0
    ├─ set-blocking@2.0.0
    ├─ sharp@0.30.3
    ├─ signal-exit@3.0.7
    ├─ simple-concat@1.0.1
    ├─ simple-get@4.0.1
    ├─ simple-swizzle@0.2.2
    ├─ source-map-js@1.0.2
    ├─ space-separated-tokens@2.0.1
    ├─ sprintf-js@1.0.3
    ├─ string_decoder@1.3.0
    ├─ string-width@1.0.2
    ├─ stringify-entities@4.0.2
    ├─ strip-ansi@3.0.1
    ├─ strip-bom-string@1.0.0
    ├─ strip-json-comments@2.0.1
    ├─ styled-jsx@5.0.0
    ├─ tar-fs@2.1.1
    ├─ tar-stream@2.2.0
    ├─ trough@2.1.0
    ├─ unist-builder@3.0.0
    ├─ unist-util-generated@2.0.0
    ├─ unist-util-position@4.0.2
    ├─ unist-util-visit-parents@5.1.0
    ├─ use-subscription@1.5.1
    ├─ util-deprecate@1.0.2
    ├─ vfile-message@3.1.2
    ├─ vfile@5.3.2
    ├─ wide-align@1.1.5
    ├─ wrappy@1.0.2
    ├─ yallist@4.0.0
    └─ zwitch@2.0.2
    ✨  Done in 89.10s.
</details>

![スクリーンショット_2022-03-17_20.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/a8b8f846-1942-f69f-b75b-58fc1975385c.png)
![スクリーンショット_2022-03-18_20.33.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/68ea1ff0-1767-fc05-d3e1-9acb3ff828c8.png)
![スクリーンショット_2022-03-18_20.33.28（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/4656682c-a00a-1f6a-3741-9d88c55f9430.png)
![スクリーンショット_2022-03-18_20.42.07（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/480bb8a8-5165-3927-35bf-c4d49372df7c.png)

### 日付の表示変更
![スクリーンショット_2022-03-18_20.54.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/656d42c5-e0ff-ccfb-aca5-38f74ae6b115.png)
![スクリーンショット_2022-03-18_20.56.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/5df130a9-f125-69a8-f5ac-7734df3b9c95.png)
![スクリーンショット_2022-03-18_21.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/35a116f7-ea29-a543-dad8-b3c84aeaa2ab.png)
![スクリーンショット_2022-03-18_21.08.46（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/794bc74b-0639-a9af-d9f2-da451609ec49.png)
![スクリーンショット_2022-06-03_20.34.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2dae88dd-cad2-f78b-1c5a-fb67ff497a5c.png)