[{"data":1,"prerenderedAt":561},["ShallowReactive",2],{"content-\u002Fcontents\u002Fnextjs-typescript":3,"surroundPost-\u002Fcontents\u002Fnextjs-typescript":552},{"id":4,"title":5,"body":6,"createdAt":540,"description":29,"draft":541,"extension":542,"meta":543,"navigation":148,"path":544,"seo":545,"stem":546,"tags":547,"thumbnail":550,"updatedAt":540,"__hash__":551},"contents\u002Fcontents\u002Fnextjs-typescript.md","初心者が学ぶNext.js + Typescriptの使い方",{"type":7,"value":8,"toc":531},"minimark",[9,13,16,19,30,35,38,57,61,68,88,105,224,227,248,408,410,413,416,426,429,463,505,508,514,518,522,527],[10,11,12],"p",{},"本記事では Next.js と Typescript に関して、チュートリアル等で疑問に思った内容について学んだ内容をまとめていきます。\nNext.js に関しては Typescript の前提で書きます。",[10,14,15],{},"以下今回の記事で扱う環境情報です。",[10,17,18],{},"Next.js + Typescript インストール （node バージョン: v15.10.0）",[20,21,26],"pre",{"className":22,"code":24,"language":25},[23],"language-text","yarn create next-app --typescript\n","text",[27,28,24],"code",{"__ignoreMap":29},"",[31,32,34],"h2",{"id":33},"nextjs-の基本","Next.js の基本",[10,36,37],{},"Next.js ではインストールと画面の表示、基本的なコンポーネントの追加あたりは特に悩まずにできると思います。\nその後の段階で以下の内容に関して悩むことが多かったのでまとめました。",[39,40,41,45,48,51,54],"ul",{},[42,43,44],"li",{},"_app.tsx とは",[42,46,47],{},"_document.tsx とは",[42,49,50],{},"関数コンポーネントの書き方の違い",[42,52,53],{},"Typescript 版はどこを意識すべきか",[42,55,56],{},"開発環境はどうしたらいい",[58,59,44],"h3",{"id":60},"_apptsx-とは",[10,62,63,64,67],{},"公式サイトでは",[27,65,66],{},"App","コンポーネントを使用することで以下のことが可能になると記述されています。",[69,70,71],"blockquote",{},[39,72,73,76,79,82,85],{},[42,74,75],{},"ページが変化する間でレイアウトを保持する",[42,77,78],{},"ページ遷移時に state を保持する",[42,80,81],{},"componentDidCatch を使って独自のエラーハンドリングを行う",[42,83,84],{},"ページに追加の情報を注入する",[42,86,87],{},"グローバル CSS を追加する",[10,89,90,91,93,94,96,97,100,101,104],{},"標準で",[27,92,66],{},"は使われているようで、上記に示す内容を実行したい場合は",[27,95,66],{},"を上書きします。\n上書きは",[27,98,99],{},"pages\u002F_app.tsx","を作成します。\n上述したコマンドでプロジェクトを作成した場合、",[27,102,103],{},"_app.tsx","は既に存在しています。\nファイルの中身は以下のようになっています。",[20,106,110],{"className":107,"code":108,"language":109,"meta":29,"style":29},"language-tsx shiki shiki-themes github-dark","import '..\u002Fstyles\u002Fglobals.css'\nimport type { AppProps } from 'next\u002Fapp'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return \u003CComponent {...pageProps} \u002F>\n}\nexport default MyApp\n","tsx",[27,111,112,125,143,150,185,206,212],{"__ignoreMap":29},[113,114,117,121],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"snl16","import",[113,122,124],{"class":123},"sU2Wk"," '..\u002Fstyles\u002Fglobals.css'\n",[113,126,128,130,133,137,140],{"class":115,"line":127},2,[113,129,120],{"class":119},[113,131,132],{"class":119}," type",[113,134,136],{"class":135},"s95oV"," { AppProps } ",[113,138,139],{"class":119},"from",[113,141,142],{"class":123}," 'next\u002Fapp'\n",[113,144,146],{"class":115,"line":145},3,[113,147,149],{"emptyLinePlaceholder":148},true,"\n",[113,151,153,156,160,163,167,170,173,176,179,182],{"class":115,"line":152},4,[113,154,155],{"class":119},"function",[113,157,159],{"class":158},"svObZ"," MyApp",[113,161,162],{"class":135},"({ ",[113,164,166],{"class":165},"s9osk","Component",[113,168,169],{"class":135},", ",[113,171,172],{"class":165},"pageProps",[113,174,175],{"class":135}," }",[113,177,178],{"class":119},":",[113,180,181],{"class":158}," AppProps",[113,183,184],{"class":135},") {\n",[113,186,188,191,194,197,200,203],{"class":115,"line":187},5,[113,189,190],{"class":119},"  return",[113,192,193],{"class":135}," \u003C",[113,195,166],{"class":196},"sDLfK",[113,198,199],{"class":135}," {",[113,201,202],{"class":119},"...",[113,204,205],{"class":135},"pageProps} \u002F>\n",[113,207,209],{"class":115,"line":208},6,[113,210,211],{"class":135},"}\n",[113,213,215,218,221],{"class":115,"line":214},7,[113,216,217],{"class":119},"export",[113,219,220],{"class":119}," default",[113,222,223],{"class":135}," MyApp\n",[58,225,47],{"id":226},"_documenttsx-とは",[10,228,229,232,233,236,237,240,241,244,245,247],{},[27,230,231],{},"\\_document.tsx","は",[27,234,235],{},"\u003Chtml>","や",[27,238,239],{},"\u003Chead>","、",[27,242,243],{},"\u003Cbody>","を標準から書き換えたい場合に使用します。\n例えば、",[27,246,239],{},"タグに OGP の設定やサイズごとのアイコン設定などはデフォルトで設定する必要がないので設定する必要があります。\n基本は以下のように書きます。",[20,249,251],{"className":107,"code":250,"language":109,"meta":29,"style":29},"import Document, { Html, Head, Main, NextScript } from 'next\u002Fdocument'\n\nclass MyDocument extends Document {\n  render() {\n    return (\n      \u003CHtml>\n        \u003CHead \u002F>\n        \u003Cbody>\n          \u003CMain \u002F>\n          \u003CNextScript \u002F>\n        \u003C\u002Fbody>\n      \u003C\u002FHtml>\n    )\n  }\n}\n\nexport default MyDocument\n",[27,252,253,265,269,286,294,302,313,324,335,346,356,366,376,382,388,393,398],{"__ignoreMap":29},[113,254,255,257,260,262],{"class":115,"line":116},[113,256,120],{"class":119},[113,258,259],{"class":135}," Document, { Html, Head, Main, NextScript } ",[113,261,139],{"class":119},[113,263,264],{"class":123}," 'next\u002Fdocument'\n",[113,266,267],{"class":115,"line":127},[113,268,149],{"emptyLinePlaceholder":148},[113,270,271,274,277,280,283],{"class":115,"line":145},[113,272,273],{"class":119},"class",[113,275,276],{"class":158}," MyDocument",[113,278,279],{"class":119}," extends",[113,281,282],{"class":158}," Document",[113,284,285],{"class":135}," {\n",[113,287,288,291],{"class":115,"line":152},[113,289,290],{"class":158},"  render",[113,292,293],{"class":135},"() {\n",[113,295,296,299],{"class":115,"line":187},[113,297,298],{"class":119},"    return",[113,300,301],{"class":135}," (\n",[113,303,304,307,310],{"class":115,"line":208},[113,305,306],{"class":135},"      \u003C",[113,308,309],{"class":196},"Html",[113,311,312],{"class":135},">\n",[113,314,315,318,321],{"class":115,"line":214},[113,316,317],{"class":135},"        \u003C",[113,319,320],{"class":196},"Head",[113,322,323],{"class":135}," \u002F>\n",[113,325,327,329,333],{"class":115,"line":326},8,[113,328,317],{"class":135},[113,330,332],{"class":331},"s4JwU","body",[113,334,312],{"class":135},[113,336,338,341,344],{"class":115,"line":337},9,[113,339,340],{"class":135},"          \u003C",[113,342,343],{"class":196},"Main",[113,345,323],{"class":135},[113,347,349,351,354],{"class":115,"line":348},10,[113,350,340],{"class":135},[113,352,353],{"class":196},"NextScript",[113,355,323],{"class":135},[113,357,359,362,364],{"class":115,"line":358},11,[113,360,361],{"class":135},"        \u003C\u002F",[113,363,332],{"class":331},[113,365,312],{"class":135},[113,367,369,372,374],{"class":115,"line":368},12,[113,370,371],{"class":135},"      \u003C\u002F",[113,373,309],{"class":196},[113,375,312],{"class":135},[113,377,379],{"class":115,"line":378},13,[113,380,381],{"class":135},"    )\n",[113,383,385],{"class":115,"line":384},14,[113,386,387],{"class":135},"  }\n",[113,389,391],{"class":115,"line":390},15,[113,392,211],{"class":135},[113,394,396],{"class":115,"line":395},16,[113,397,149],{"emptyLinePlaceholder":148},[113,399,401,403,405],{"class":115,"line":400},17,[113,402,217],{"class":119},[113,404,220],{"class":119},[113,406,407],{"class":135}," MyDocument\n",[58,409,50],{"id":50},[10,411,412],{},"関数コンポーネントの書き方の違いを整理します。",[10,414,415],{},"書き方は以下があると思います。",[39,417,418,423],{},[42,419,420,422],{},[27,421,155],{},"を書くパターン",[42,424,425],{},"アロー関数を使うパターン",[10,427,428],{},"それぞれ以下のようにかけます。",[20,430,432],{"className":107,"code":431,"language":109,"meta":29,"style":29},"function Hoge(props) {\n  return \u003CComponent \u002F>\n}\n",[27,433,434,449,459],{"__ignoreMap":29},[113,435,436,438,441,444,447],{"class":115,"line":116},[113,437,155],{"class":119},[113,439,440],{"class":158}," Hoge",[113,442,443],{"class":135},"(",[113,445,446],{"class":165},"props",[113,448,184],{"class":135},[113,450,451,453,455,457],{"class":115,"line":127},[113,452,190],{"class":119},[113,454,193],{"class":135},[113,456,166],{"class":196},[113,458,323],{"class":135},[113,460,461],{"class":115,"line":145},[113,462,211],{"class":135},[20,464,466],{"className":107,"code":465,"language":109,"meta":29,"style":29},"const Hoge = (props) => {\n  return \u003CComponent \u002F>\n}\n",[27,467,468,491,501],{"__ignoreMap":29},[113,469,470,473,475,478,481,483,486,489],{"class":115,"line":116},[113,471,472],{"class":119},"const",[113,474,440],{"class":158},[113,476,477],{"class":119}," =",[113,479,480],{"class":135}," (",[113,482,446],{"class":165},[113,484,485],{"class":135},") ",[113,487,488],{"class":119},"=>",[113,490,285],{"class":135},[113,492,493,495,497,499],{"class":115,"line":127},[113,494,190],{"class":119},[113,496,193],{"class":135},[113,498,166],{"class":196},[113,500,323],{"class":135},[113,502,503],{"class":115,"line":145},[113,504,211],{"class":135},[10,506,507],{},"調べてみるとどちらでも動作には問題ないのでチームや個人で決めるのが良さそうです。",[10,509,510,511,513],{},"個人的には",[27,512,155],{},"の方がわかりやすいなと思います。",[58,515,517],{"id":516},"typescript-で意識すること","Typescript で意識すること",[31,519,521],{"id":520},"その他-javascript-関連の疑問","その他 JavaScript 関連の疑問",[39,523,524],{},[42,525,526],{},"callback 関数とは",[528,529,530],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":29,"searchDepth":127,"depth":127,"links":532},[533,539],{"id":33,"depth":127,"text":34,"children":534},[535,536,537,538],{"id":60,"depth":145,"text":44},{"id":226,"depth":145,"text":47},{"id":50,"depth":145,"text":50},{"id":516,"depth":145,"text":517},{"id":520,"depth":127,"text":521},"2021-08-15",false,"md",{},"\u002Fcontents\u002Fnextjs-typescript",{"title":5,"description":29},"contents\u002Fnextjs-typescript",[548,549],"NextJs","TypeScript","\u002Fimg\u002Ftwitter-card.png","u7Pdp-suWdjSllGu2tdshaeZCCbmaSmkVEiaDqyh7ds",[553,557],{"title":554,"path":555,"stem":556,"children":-1},"MUSE-Autoskill: Self-Evolving Agents via Skill Creation, Memory, Management, and Evaluation","\u002Fcontents\u002Fmuse-autoskill","contents\u002Fmuse-autoskill",{"title":558,"path":559,"stem":560,"children":-1},"Nuxt 3、Tailwind、Nuxt content v2によるブログ作成のための基本設定","\u002Fcontents\u002Fnuxt-3nuxt-content-v2","contents\u002Fnuxt-3nuxt-content-v2",1784936719392]