最初に Reactのチュートリアル、Next.jsのチュートリアル、TypeScriptの入門?を終えたので、そのアウトプットとして無料で運用出来るtechBlogを作成しようと思う。記事は新しくブログ用に書くとZennと分散してしまうのでZennに投稿している記事を使ってサイトをビルドしていく。その前、準備としてZennとGitHubを連携する必要があるのでまだ行っていない方はこちらの記事を参考にすると出来ます。 実際に作成したtechBlog モバイル版 デスクトップ版 techBlog:大学生だった 実際のコード 参考にしたデザイン MNW- mobile 構成 Next.js index.tsx 記事をzennの投稿を管理しているリポジトリから取得する。 TypeScriptでAPIの型を定義する。 [id].tsx コードのシンタックスハイライト、数式、テーブルを表示する。 co
![【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。](https://cdn-ak-scissors.b.st-hatena.com/image/square/83f94d9349af6790f33b0020f461b088e9f5f83e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--qUsXPlgi--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590%2525E7%252584%2525A1%2525E6%252596%252599%2525E9%252581%25258B%2525E7%252594%2525A8%2525E3%252580%252591Zenn%2525E3%252581%2525AE%2525E6%25258A%252595%2525E7%2525A8%2525BF%2525E8%2525A8%252598%2525E4%2525BA%25258B%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%2525E3%252582%252592Next.js%25252C%252520Tailwindcss%25252C%252520TypeScript%25252C%252520...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E5%2525A4%2525A7%2525E5%2525AD%2525A6%2525E7%252594%25259F%2525E3%252581%2525A0%2525E3%252581%2525A3%2525E3%252581%25259F.%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc0NjRlYjVlZGEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)