Next.jsのチュートリアルでエラーが出た話

nextのバージョンは10.2.3です。（最新版ではないです）

エラーで詰まったのはこの章の話です
https://nextjs.org/learn/basics/dynamic-routes/render-markdown

##結論から

バージョンが最新版ではないライブラリをインストールしてください

npm install --save remark@13.0.0 remark-html@13.0.2

lib/posts.jsの記載を変更してください

posts.js

import remark from 'remark'   //{}はずすだけ
import html from 'remark-html'

##経緯

###1.まずreamrkとremark-htmlというライブラリを入れる

npm install --save remark remark-html

###2.チュートリアルの通りにソースコードを修正して、下記にアクセス
http://localhost:3000/posts/ssg-ssr
http://localhost:3000/posts/pre-rendering

###3.すると、下記エラーが発生

ターミナルに出力されたエラー

~~~/node_modules/remark/index.js:1
(function (exports, require, module, __filename, __dirname) { import {unified} from 'unified'

###4.ライブラリ（remark）のバージョンが良くないと思い、下記で最もダウンロードされているバージョンに下げる
https://www.npmjs.com/package/remark

npm install --save remark@13.0.0

package.json

  "dependencies": {
    "gray-matter": "^4.0.2",
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remark": "^13.0.0",   //14.0.2→13.0.0に変更されたことを確認
    "remark-html": "^15.0.1",
    "unified": "^10.1.1"
  }

###5.再度 http://localhost:3000/posts/ssg-ssr にアクセス

エラーが少し変わった。今度はremark-htmlでエラーが出てるっぽい

ターミナルに出力されたエラー

~~~/node_modules/remark-html/index.js:15
import {toHtml} from 'hast-util-to-html'

###6.4と同様、ライブラリ（remark-html）を最もダウンロードされているバージョンに下げる
https://www.npmjs.com/package/remark-html

npm install --save remark-html@13.0.2

pacackage.json

  "dependencies": {
    "gray-matter": "^4.0.2",
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remark": "^13.0.0",
    "remark-html": "^13.0.2",  //15.0.1→13.0.2に変更されたことを確認
    "unified": "^10.1.1"
  }

これで流石にいけると思った

###7.再度 http://localhost:3000/posts/ssg-ssr にアクセス

発狂。
ただ、is not a functionだから関数（remark）をうまく読み込めてないのかなと思う

ターミナルに出力されたエラー

TypeError: (0 , remark__WEBPACK_IMPORTED_MODULE_3__.remark) is not a function
    at getPostData (webpack-internal:///./lib/posts.js:83:80)
    (省略)

###8.importの記述を修正

posts.js

import { remark } from 'remark'  //公式チュートリアルではこう書けと記載してある
import html from 'remark-html'

↓

posts.js

import remark from 'remark'   //{}はずすだけ
import html from 'remark-html'

###9.再度 http://localhost:3000/posts/ssg-ssr にアクセス

解決。

next最新版なら普通に動くみたいなオチだったら悲しい