チュートリアルで気になったところのメモです。
動的ルーティング(Dynamic Routing)で404エラー
こちらはエンジニアコミュニティの方にアドバイス頂いたところ、[id].js の[ の前に半角スペースが入っていたのでルーティングができてませんでした。
修正したら無事にブログの個別記事が表示されました。
ブログの個別記事
- どちらもpostsフォルダ(プロジェクト直下)内のmdファイル内のタイトルと年月日を表示しています。
- 日付表示はdate-fns、mdファイルをHTMLに変換するためremark-htmlを使用しています。
- プロフィール画像はpublic内に画像用フォルダを用意してそちらから表示
- lib/post.tsxはファイルをからデータを取得するためのライブラリ
npmコマンド
% 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したらこんな警告が出ました。
% 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
package.json⇒scripts⇒startのnext startを本番環境で使うならsharpの導入をおすすめしますとのこと。
{
"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した
ログ
% 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.
日付の表示変更
