🗂️

Next.js13(App router) x ChakraUIでポートフォリオ作ってみた

2023/08/30に公開

概要

プログラマを志して転職活動中のハルキメデスです。流行りのNext.jsとChakraUIをつかって簡単なポートフォリオを作ってみました。Typescript, React, Next.js, ChakraUIに関して、触ったことがなかったので調べながらですが作ってみました。

https://portfolio-sasaharukimedes.vercel.app/

https://github.com/sasaharukimedes/chakra-portfolio

使用技術

  • Typescript
  • React
  • Next.js 13 (App router)
  • ChakraUI (デザイン周り)
  • Vercel (デプロイ)
  • Formspree (お問い合わせ受付)

所感

初めてNext.js 13に触ってみましたが、Deno Freshを使ったときよりもドキュメントや記事が多くて参考になりました。が、いかんせんApp router の場合の記事はあまりなく(ディレクトリ構造がこれまでと違うので、最初は何がなんだかいまいちわかりませんでした)、その点だけ苦労しました。

ChakraUIに関しては、まだ慣れていないから、うーんびみょいなあ、と思ってしまいました。
いちいちimport しないといけないところとか、あまりなれなくて、これならTailwindCSSのほうがいいのかな?とも思ってしまいました。

ただ、ファイルの見た目はChakraUIのほうがスッキリしているとは思いますし、結局自由度とコードの綺麗さ(見やすさ)はトレードオフなのかな?と思いました。

最後に

ここまでお付き合いくださりありがとうございます。僕の自作のアプリのリンクと、自作しましたポートフォリオ、自作ブログのリンクも貼っておくので、興味を持っていただけたら嬉しいです。

絶賛転職活動中ですので、どうぞよろしくお願いいたします。

コトノハというアプリを作りました!

Harukimedes's Portfolioというポートフォリオを作りました!

My Updating (b)logsというブログを作りました!

Discussion