SaaS / Cloud Storage · Cloud Storage SaaS Platform

From Laravel to React & Next.js: Re-Architecting a Cloud Storage App with a Decoupled API to Power iOS

Background

The client's cloud storage app was a tightly coupled monolith built in Laravel with Blade templates — frontend and backend fused together. The server-rendered UI worked, but it lacked a modern, app-like feel, and critically, its architecture couldn't support the native iOS app they wanted to add. Business logic was baked into the views, so nothing could be reused from another platform.

Challenge

The goal was to modernize the user experience while powering both the web app and a native iOS app from a single source of truth. Core logic — file uploads, sharing, permissions — had to be consumed securely by multiple clients without duplicating any of it. On top of that, the migration had to happen incrementally, without taking the live service offline.

Strategy

• Decoupled the Backend into an API-Only Service: Re-architected Laravel into a stateless, view-less JSON API with token authentication via Laravel Sanctum. All file, sharing, and permission logic became a single source of truth that any client could call.
• Rebuilt the Frontend in React & Next.js: Built a new web frontend on Next.js (App Router): SSG/SSR for marketing pages to keep SEO and speed, and an app-like SPA dashboard that consumes the API.
• Incremental Strangler-Pattern Migration: Migrated route by route using the strangler pattern — the existing Laravel app kept serving each page until its replacement was ready, achieving the cutover with zero downtime.
• Storage Layer Optimized for Large Files: Implemented presigned-URL direct-to-S3 uploads with chunked uploading, bypassing the app server so even very large files upload fast and scale cleanly.
• Built the iOS App on the Same API: The native Swift iOS app consumes the exact same REST API as the web. No business logic was duplicated, web and iOS behavior stay perfectly consistent, and the build timeline shrank dramatically.

Results

• A single API now powers both the web (Next.js) app and the native iOS app
• Shipped the iOS app quickly with zero duplicated business logic
• App-like UX and faster loads dramatically improved page speed and Core Web Vitals
• A maintainable architecture where frontend and backend deploy independently
• Migrated incrementally with zero downtime — existing users were never disrupted

Conclusion

The turning point of this project was the decision to decouple the backend into an API. Separating frontend from backend let us build a modern Next.js web app and a native iOS app on the same API — with no duplicated logic — something the tightly coupled Laravel monolith could never have supported. Making the backend an independent single source of truth is one of the highest-value investments any product planning a multi-platform future can make.

---

SaaS / クラウドストレージ · クラウドストレージSaaSプラットフォーム

LaravelからNext.jsへ：APIを分離してクラウドストレージアプリを再構築し、iOSアプリ開発を実現

背景

クライアントのクラウドストレージアプリは、フロントエンドとバックエンドが密結合したモノリシックなLaravel（Bladeテンプレート）で構築されていました。サーバーレンダリングのUIは動作はしていたものの、モダンでアプリのような操作感に欠け、何よりネイティブのiOSアプリを追加したいというニーズに応えられない構造になっていました。ビジネスロジックがビューに埋め込まれているため、別プラットフォームから再利用することができなかったのです。

課題

目標は、ユーザー体験を一新しつつ、Web版とネイティブiOSアプリの両方を単一の信頼できる情報源から動かすことでした。そのためには、ファイルのアップロード・共有・権限管理といった中核ロジックを一切複製せずに、複数のクライアントから安全に利用できる必要がありました。さらに、稼働中のサービスを止めずに段階的に移行することが求められました。

戦略

• バックエンドをAPI専用に分離: Laravelをビューを持たないステートレスなJSON APIへと再構築。Laravel Sanctumによるトークン認証を導入し、ファイル操作・共有・権限といった全ロジックを唯一の信頼できる情報源として整理しました。
• React + Next.jsでフロントエンドを再構築: Next.js（App Router）でWebフロントエンドを一から構築。マーケティングページはSSG/SSRでSEOと表示速度を確保しつつ、ダッシュボードはAPIを消費するアプリライクなSPA体験に刷新しました。
• ストラングラーパターンによる段階移行: ルート単位で少しずつ移行する「ストラングラー」方式を採用。移行が完了するまで既存のLaravelが該当ページを配信し続けることで、ダウンタイムゼロでの切り替えを実現しました。
• 大容量ファイルに最適化したストレージ層: S3への署名付きURLによる直接アップロードとチャンクアップロードを実装。サーバーを経由しない設計で、大きなファイルでも高速かつスケーラブルに扱えるようにしました。
• 同一APIでiOSアプリを構築: Webと全く同じREST APIをSwift製ネイティブiOSアプリから利用。ビジネスロジックを二重に書く必要がなくなり、Web・iOSの挙動が常に一致し、開発期間も大幅に短縮されました。

結果

• 単一のAPIがWeb（Next.js）とネイティブiOSアプリの両方を駆動
• ロジックを複製せずにiOSアプリを短期間でリリース
• アプリライクなUXと高速化により、ページ表示速度とCore Web Vitalsが大幅に改善
• フロントエンドとバックエンドを独立してデプロイできる、保守しやすいアーキテクチャを実現
• ダウンタイムゼロで段階的に移行し、既存ユーザーへの影響を回避

結論

このプロジェクトの転換点は、バックエンドをAPIとして分離した決断でした。フロントエンドとバックエンドを切り離したことで、モダンなNext.js Webアプリと、同じAPIを利用するネイティブiOSアプリを、ロジックを二重化することなく構築できました。密結合したLaravelモノリスでは不可能だったことです。バックエンドをひとつの信頼できる情報源として独立させることは、マルチプラットフォーム展開を見据えるあらゆるプロダクトにとって、最も価値ある投資のひとつだと私たちは考えています。