2021.09/23
Next.js,GraphCMSでブログの作成（個別ページ編）
Next.js,
frontend,
React.js,
Vercel,
TypeScript,
GraphQL,
GraphCMSから取得したそれぞれの記事の個別ページを、Next.jsのGetStaticPathsを用いて作っていきます。
search
article
2021.09/15
PDFファイルをURL化し、API経由で表示させる方法(Next.js)
Next.js,
frontend,
React.js,
TypeScript,
GraphQL,
今回はページの遷移先に、pdfファイルを指定して表示させる方法についてまとめました。 URL化したpdfファイルを直接コードに貼り付けるのは、セキュリティ上良くないようです。 そこで今回はgraphCMSにデータを保存し、クエリを投げてファイルを取得します。
2021.09/04
Next.jsでGraphCMSを使ったブログの作成
Next.js,
frontend,
React.js,
TypeScript,
GraphQL,
今回は、graphCMS を使って Next.js アプリにブログを導入する方法を書いていきます。GraphCMSは名前の通り、graphQLクエリを使えるHeadlessCMSになります。見た目の UI が綺麗で使いやすいです。この記事では、ブログの一覧を表示するページを作っていきます。
2021.08/10
react-slickの矢印をカスタマイズしてオリジナリティを出す
React.js,
Library,
frontend,
ライブラリのスライダーは便利ですが、矢印ボタンがデフォルトのままでは、オリジナリティを出せないですよね。 そこで今回は、react-slickのデフォルトでもつ矢印をスタイル変更していきたいと思います。nextArrow、prevArrowにコンポーネントを指定することによって、矢印のボタンをカスタマイズすることができます。
2021.08/03
Google Domainsからドメインを購入して、Vercelのサイトに紐付ける
Next.js,
Vercel,
frontend,
このサイトを作ってから、はや半年。かなり遅いですが、新規でドメインを購入してサイトに紐付けを行いました。その時のまとめです。 今回はGoogle Domainsからドメインを購入して、Vercelでデプロイされているサイトにドメインを紐付けます。
2021.07/23
SEO対策にも。Google開発の次世代フォーマット、「webp」を使ってみた
frontend,
webp(ウェッピーと読むそうです)とは画像フォーマットのことです。画像の拡張子といえば、.jpgや.pngを思い浮かべると思うのですが、 それらの次世代フォーマットと言われています。「.webp」が拡張子になります。メリットは、ファイルサイズが小さいことです。「.png」、「.jpg」などと同等の画質で、それらと比べファイルサイズが25%ほど削減できます。ファイルサイズは小さければ小さいほど良いですから魅力的ですよね。
2021.07/19
firebaseの大替プロダクト。話題のSupabaseを触ってみた
frontend,
firebase,
Supabase,
firebaseを使用しない原因として多く挙げられていたのはNoSQLだからというものです。使いやすい上に、そのデメリットを克服したSupabaseは今後かなり伸びてくるだろうと思いました。もちろん、firebaseの上位互換というわけではなくデータベースの用途によって使い分けるようになっていくと思います。 ストレージも発表され、またfunctionも近いうちに発表されるだろうということで、NoSQL、RDBでfirebase、Supabaseを扱い分けることができ、フロントメインで開発しているエンジニアにとっても選択肢の広がるサービスだと思いました。
2021.07/15
react-scrollでTopに戻るための自動スクロールを実装
Library,
frontend,
React.js,
Next.js,
作成過程でreact-scrollを使用した自動スクロールを実装したので、その時のまとめです。react-scrollは、スムーズなスクロールを簡単に実装することができるライブラリです。ページのTopに戻りたい,ボタンを押した時に自動である位置まで移動して欲しいと行った時に便利です。
search
category
React.js
Next.js
TypeScript
Tailwind.css
GraphQL
Vercel
firebase
Supabase
AWS
recommended
2022-05-23AWS資格 SAPとSOAを取得したので、対策や受験時の感想について
2022-03-15実務経験一年の転職活動(エンジニア生活：2月)
2022-02-072022年は、フルスタックエンジニアに(エンジニア生活：1月）
2022-01-29「AWSエンジニア入門講座――学習ロードマップで体系的に学ぶ」を読んだ感想
2022-01-04エンジニア転職した一年の振り返り
2021-12-02Remixと朝活(エンジニア生活：11月)
・・・