はじめに 皆さんこんにちは、mamiなのだ! 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ! フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ! ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまったので、気になる部分だけ読んでみても良いのだ! フロントガチ初心者の方は読んでるだけでも勉強になると思うので、暇な時にのんびり読むことをお勧めするのだ! 対象読者 フロントを勉強し始めた初学者さん フロントがメイ

概要 microCMS、Next.js(TypeScript)を使ってブログサイトを作成した手順と、追加で実装した機能について、またその過程で学んだことの備忘録記事です。 基本的には公式のチュートリアル通りに進めていますが、TypeScriptの型付けや記事内のコードブロックのハイライトなど詰まった箇所もあったので、まとめておきたいと思います。 デプロイURLGitHub ※この記事ではスタイリングについては解説しません。 MaterialUIを主に使用してスタイリングを行っているので、詳しいコードはGitHubをご覧いただければと思います。 使用技術Next.js 12.0.10React 17.0.2TypeScript 4.5.5 ESLint 8.8.0 prettier 2.5.1 全体の流れ microCMSの準備(アカウント作成・記事コンテンツのAPI作成) Next

こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、FetchAPIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ

はじめにmicroCMSは国産のヘッドレスCMSで、このブログのコンテンツもmicroCMSで管理しています。microCMSは�Webhookを提供しているので、コンテンツやAPIを更新した時にGitHub ActionsやNetlifyなどのサービスにイベントを送信することができます。 今回はGitHub Actionsとの連携方法を紹介します。連携の手順は簡単で、大きく次の3ステップだけです。GitHubでトークンを発行する microCMSにGitHub ActionsのWebhookを追加するGitHub Actionsのworkflowにrepository_dispatchを設定するGitHubでトークンを発行するまずは、microCMSのWebhookで使用するトークンを発行します。GitHubの「Personal access tokens」で、「Generate

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く