Next13でNextAuthを使いつつログインフォームを作ってみた
今回やること 前回Next13の新機能ServerActionsを使ってユーザー登録を作ったので、ログインフォームを作っていく。 認証部分は（初めてだけど）NextAuthを使う。 Nextで実装できる箇所についてはNext側で実装していくためNextAuthはログインでの認証のみ実装。 作ってみた 流れと実装方法 実装の流れ NextAuthでログインの処理 ログインしているかどうかでヘッダーの内容を変更 セッションからユーザーのIDを取得しServer側でユーザーデータを取得する 本編とは逸れるのでここに記載するが今回からNextUIとReactIconsを導入。 導入方法は割愛するので各ドキュメント等参照。 NextAuthの準備 NextAuthについて。 認証機能をNextに実装できるライブラリ。 インストール まずはドキュメントに合わせてインストールしていく。 import {
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
Shorebird
Deploy updates instantlyCode push is a cloud service that allows developers to push app updates directly to users' devices.
CSS finally adds vertical centering in 2024 | Blog | build-your-own.org
align-content works in the default layout in 2024, allowing vertical centering with 1 CSS property. <div style="align-content: center; height: 100px;"> <code>align-content</code> just works! </div> Supported since: Chrome: 123 | Firefox: 125 | Safari: 17.4 What’s new? The status quo for CSS alignment is to switch to flexbox or grid because align-content doesn’t work in the default layout (flow). I
Coda: Your all-in-one collaborative workspace.
Coda brings teams and tools together for a more organized work day.
【翻訳】How To Fix Your Fat ViewController
iOS の開発ではよくあることですが、 UIViewController は Views 、 outlet 、 action 、 layout 、ビジネスロジックなど、あらゆる要素で埋め尽くされてしまうため、非常にゴチャゴチャして管理しづらくなります。 実際、 UIViewController は非常にシンプルであるべきです。 UIViewController は View を管理し、アクションの発生を監視するだけで良いのです。このチュートリアルでは、私がいつもプロジェクトに適用しているベストプラクティスの1つを共有したいと思います。 解決方法 画面を複数の UIView コンポーネント に分割し、それぞれの UIView コンポーネント が全てのレイアウトとスタイルを管理します。また、アクションや変更を ViewController に通知する責任も負います。その上、 UIView コン
Tuist
Tuist More productive and happier teams using Xcode Effortlessly build, test, and deploy your apps with Tuist's revolutionary automation and project management features. Proudly sponsored by import ProjectDescription let project = Project( name: "Tuist", targets: [ Target( name: "Tuist", platform: .iOS, product: .app, bundleId: "io.tuist.Tuist", sources: ["Sources/**"] ), Target( name: "TuistTests
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
Snyk ContainerでDockerfileをスキャンしてみる | DevelopersIO
Snyk Containerでは、イメージに対してだけではなく、Dockerfileに対してもスキャンが可能です。 Scan your Dockerfile | Snyk User Docs コンテナをBuild・Pushをする前にスキャンができるため、より早い段階で脆弱性を検知できます。 今回は、Snyk ContainerのDockerfileのスキャンを試してみました。 やってみた Dockerfileを含んだリポジトリの用意 Snykのデモ用のリポジトリをフォークして使います。リポジトリは以下です。 snyk-japan/juice-shop: OWASP Juice Shop: Probably the most modern and sophisticated insecure web application ちなみに、Snyk Code & Open Sourceを試してみた
ユーザ同士でビデオ通話が出来る LiveKit を使ってハッカー飯にルーム機能を導入した話
ハッカー飯とは ハッカー飯はエンジニア同士が気軽につながるオンラインプラットフォームです。 ハッカー飯：https://hackermeshi.com マッチング機能や食事会機能、コミュニティ機能等が存在し、気の合うユーザ同士で実際にご飯を食べにいったり、遊んだり、オンライン上で会話を行ったりすることが出来ます。 先日ハッカー飯ではルーム機能のリリースを行い、よりユーザ同士が繋がりやすくなりました。 この記事ではルーム機能導入の背景や、使用したツールについて簡単に紹介いたします。 ルーム機能とは？ ルームの作成を行うと通話用の URL が発行され、ユーザ同士でお話しすることが出来る機能です。 イメージとしては、Twitter Space + Google Meet をかけあわせたような機能となっております。 ルーム機能の使い方の流れ ①作成ボタンを押してルームの生成を行います ②入室ボタン
Python + VSCode の環境構築 20240604
作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 追記 rye が ruff と pytest を同梱してるので rye fmt, rye check, rye test で良かった uvicorn を叩くより、 fastapi-cli を使って起動したほうが良さそうので変更 基本方針: Rye に全部任せる 良く出来てると噂に聞いたので、 rye に任せる。 自分が Python が苦手な点は pip を下手に使うと環境が汚れていく点で、基本的に rye で閉じて管理させる。システムの
How to Build a Full-Stack Multi-Tenant App Using Next.js
How to Build a Multi-Tenant App with Custom Domains Using Next.js In this guide, you'll learn how to build a full-stack multi-tenant application by using the Platforms Starter Kit and the following technologies: Next.js App Router as the React frameworkTailwind for CSS stylingTremor for beautiful chartsPrisma as the ORM for database accessNovel for the WYSIWYG editorVercel Postgres as the database
TypeScript+clasp+esbuildでGASのローカル開発をもっと便利に
はじめに 本記事では、TypeScript+clasp+esbuildを用いたより便利なGoogleAppScriptのローカル開発環境の構築方法を紹介しています。 claspについて GoogleAppScriptで開発しようとすると、規模によってはgitを使って複数人でのバージョン管理やTypeScriptを利用した開発環境を準備したくなります。 そこで、@google/claspという開発ツールを用いることで、TypeScriptの利用やCLIでGoogleAppScript上にdeployが可能になりローカルでのコード管理が容易になります。また、必要に応じてprettierやeslintなど開発を便利にしてくれる機能なども導入可能になります。 しかし、clasp単体を利用したやり方ではTypeScriptのコンパイルはよしなにやってもらえるものの、ESmoduleの機能が使えずファ
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
Best practices for using the Terraform AWS Provider - AWS Prescriptive Guidance
Michael Begin, Senior DevOps Consultant, Amazon Web Services (AWS) May 2024 (document history) Managing infrastructure as code (IaC) with Terraform on AWS offers important benefits such as improved consistency, security, and agility. However, as your Terraform configuration grows in size and complexity, it becomes critical to follow best practices to avoid pitfalls. This guide provides recommended
TypeScriptのパフォーマンス改善
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマン…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NextJS 13 folder structure best practice
Haystack
AstroコンポーネントでGETとPOSTを扱う - アルパカログ
デジタル庁デザインシステムβ版
