サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
現状たぶんこれが一番安いと思います。(※個人開発前提のスタックです) 実現したこと opennext forcloudflare prisma (no-rust, no-engine) prisma-postgres (free plan) つまりCloudflare 上でNext.js を動かして、現実的なビルドサイズで Prisma を動かせました。 自分の手元のビルドサイズです。 ┌ ○ / 149 B 102 kB ├ ○ /_not-found 978 B 103 kB ├ ○ /prisma-test 149 B 102 kB # ... + First Load JS shared by all 102 kB ├ chunks/770-76939705ff65587a.js 46.5 kB ├ chunks/96e220d1-21a0fdc894793ec0.js 53
はじめにNext.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく議論されています。 一方で、私の先日の記事Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ:Railsの視点からで、私はこの"use server"問題には言及しませんでした。まだ非常に新しい話題でかつNext.js側の対応も進行中だというのもありますが、実は個人的にあまり気にならないのが最大の理由です。 気にならなくなったきっかけは、Server ActionをRuby onRailsのコントローラと同じように考え始めたことです。こうする
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全なNext.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
こんにちは、電話自動応答サービスIVRyでエンジニアをしている小瀬です！ 実は先月、ユーザーさんには伝わらない形で大幅な「作り直し」を行っておりました。 余談ですが、このブログを書いている時にちょうどこのツイートがバズっているのを見かけました。 過去のコードを作り直したいけど、作り直せない、みたいなことってあるあるなんだなと改めて思いました笑 今回僕らは勇気を出して作り直す決断をして、過去のコードはレポジトリ単位で捨てて、新規でAPIを100本弱、2-3ヶ月ほどかけて粛々と実装しました。 完全な作り替えだったので、リスクの高めのリリースでしたが、無事に障害なく乗り越えることができました。 今回は、作り直しの動機や、失敗しないために気をつけたことなどをブログにまとめていきたいと思います。 さらなる飛躍のために、一時停止 IVRyは、初めからリッチな構成で作ったわけではなく、どちらかと言うとプ
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。Next.js
はじめに こんにちは。ニフティ株式会社に入社して新卒四年目の佐々木です。 今回は、業務で触れる機会のあった「NextAuth.js」について紹介したいと思います。 この記事の内容NextAuth.jsの特徴NextAuth.jsの実装方法NextAuth.jsとはNextAuth.jsとは、Next.jsで認証機能を実装するためのライブラリです。 特徴NextAuth.jsの特徴としては以下になります。 セッションデータの保存をデータベースなしでも使用できる サーバーレス環境向けに設計されている（それ以外の環境でも利用はできる） デフォルトの設定でセキュアになるように設計されている ログインのセッションについては、データベースを使用せずにJWTで管理することができます。 例えばユーザー情報をアプリケーション側に保持しなくても良い場合は、「ログイン機能のためにデータベースを用意する
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js &Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。本書籍では、NextAuth.js を使ってNext.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒にNextAuth.js による認証機能を学んでいきましょう。
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
Solito is the missing piece for usingReact Native withNext.js tobuild powerful cross-platform apps. AboutThis library is two things: A tiny wrapper aroundReact Navigation andNext.js that lets you share navigation code across platforms.A set of patterns and examples forbuilding cross-platform apps withReact Native +Next.js.MotivationIn 2021, I spoke atNext.js Conf about how I built beatg
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?Blitzは、ざっくり言うとReact版Ruby onRailsです。Reactの面倒なところを全てすっ飛ばし、技術選定なんてどうでもいいから今すぐアプリを動かしたいんだよ、という要望を叶えるのに適したフルスタックフレームワークです。 概要はBlitz.js -React onRails、実際の使い方はBlitz.jsチュートリアル：投票サービスを15分で作ってみるあたりを見てもらうとして、とにかくチュートリアルに従ってコマンド打てばとりあえず動くものが一瞬でできるとかそんなかんじです。技術的にはReact +Next.js
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信していますNext.jsのISRを使って業務フローを変えた話 この記事はNext.js アドベントカレンダー 2020 の最終日の記事です。本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration（以下、ISR） とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のページのみ定期的に再ビルドする機能です。 ISRでのリクエスト先はGoogle Apps Script（以下、GAS）にしました。GAS でスプレッドシートのデータを返却するAPI を作成したので、コードも併せて紹介します。 作ったものは書籍の一覧更新を自動化するもの 開発しているサービス「弁護士ドットコムライブラリ
個人サイトをNext.jsとesaを使って作った。 スタイルが適当だったりmetaとか色々設定してないけど、記事が見れればいいっしょ、ぐらいのノリなので、とりあえず公開している。 corocn.dev モチベ r7kamura氏のエントリを見て作ろうと思った。 https://r7kamura.com/articles/2020-09-21-personal-website 概ね理由は同じだが、フィードバックと適切な距離を置いて、アウトプットへのハードルを下げたいのが理由。前から作りたいなと思っていたので、えいやで構築した。 このネタどこで書こう、Qiita?Zenn?note? はてブ? というように選択コストが上がってきたのと、プラットフォームが燃えてると自分の記事まで燃えている気持ちになるのにつらみを感じたので、雑に個人サイトでアウトプットする形に戻した。技術ネタ以外も書きたいし
感想です。 何をしたか 現状でBlitz.jsで本番サービスを運用できるかの調査。Railsで運用している本番サービスの一部機能を、3日間ほどかけて移行を試してみた。 結論 (Railsの主戦場でもある)新規事業開発の文脈でのクイックな立ち上げを想定するなら、本番運用するにはまだ厳しい。 特に、RailsユーザーとしてはActiveRecordがないのが厳しい。 開発効率そのものはRailsと比べて多少落としても、Railsよりもスケーラブルで型安全に開発したいなら、割と良い選択肢に思う。 もろもろ可能性は感じるので、引き続き応援していきたい。 良かった点（＝Blitz.jsに興味を持っている理由） 型安全な開発 サーバーもフロントも全てが型に守られた開発、そしてIDEの恩恵を受けられるのは、いうまでもなく心地がいい。 型は補助輪のようなものなので、ユーザースキルが高ければ必須ではないく
// ---- ON THE SERVER ---- // app/projects/mutations/createProject.ts import { resolver } from "@blitzjs/rpc" importdb from "db" import * as z from "zod" // This provides runtime validation + type safety export constCreateProject = z .object({ name: z.string(), }) // resolver.pipe is a functional pipe export default resolver.pipe( // Validate the input data resolver.zod(CreateProject), // Ensure
blitz-js prismarails 倒し方 を書いた時、こういう疑問がありました。 このdb はクライアントでもサーバーでも呼べるようにみえる。ここがblitz のキモで、サーバーではそのまま prisma として実行されるが、内部実装を読んでいないので想像だが、 このdb はクライアントでは同じAPI の RPC に変換されている？ (ここにセキュリティ上の不安はある。すべてをクライアントから呼べてしまう恐れはないのか？ あとでblitz のコードを呼んで、どうやって実現しているか確認する) この件についての調査をしました。 Isomorphism: クライアント・サーバー同型blitz では、次のようなコードをクライアントでもサーバーでも呼ぶことができます。 // app/auth/mutations/login.ts import { Ctx } from "bl
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby onRailsを使って開発しています。JavaScriptは正直まだ苦手です。Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
