業務システムのモダナイズを始めました〜RoRからFastAPI × next.jsへ
はじめに この記事では、詳細な技術の話は割愛しています。 「なぜモダナイズをやろうと思ったのか?」 「どんな課題意識があったのか?」 「具体的にどうプロジェクトを進めてきたのか?」 といった、課題設定・意思決定のプロセスに重点を置くことで、同じような境遇にあるチームの意思決定の材料になればと思っております。 RoRの限界...? ダイレクト出版の業務システムはRoR(v6.1)で動いてきました。リリースから6年ほど経っているでしょうか。このシステムは何をするものかというと、例えば、 商品を管理する 顧客を管理する 注文内容を設定する 一斉配信メールを送信する マーケティングオートメーションを設定する 各種分析を行う など、業務に関わるありとあらゆることを行っています。ソースコードは10万行程度で、中堅システムといった具合でしょうか。 実はこのシステム、そこまでレガシーというわけではなく、テ
SimpleでStaticなNext.jsを中心としたフロントエンド技術選定
Next.js 事務局と権利者で利用 アプリケーション基盤となるフレームワークとしてNext.jsを利用しています。2022年の4月頃の開発立ち上げ当時から使い続けています。時期的にもReactで中規模以上のアプリケーションつくるならデファクトスタンダードだったと認識しています。 開発初期はとにかく事業の立ち上げのスピードを優先しており、ゼロコンフィグで簡単にアプリケーションが立ち上がること、ファイルベースルーティングが直感的でわかりやすいことなどが採用の理由でした。 export: static 事務局と権利者アプリケーションともに全てのページでログインしないと利用できないサービスなのでstaticビルドをしています。APIサーバーはJava(Spring Boot)で動いており、ログインが確認出来次第、全てブラウザからAPIコールしています。 ビルド時にAPIサーバーへの通信は発生して
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
基礎から学ぶNext.js
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
Next.js App Router の Static Exports の可能性を探るためにブログでやってみた話 | stin's Blog
Next.js は普通に開発して普通にデプロイする場合、Node.js ランタイムでサーバーを動かすことになります。しかし next.config.js の設定1行で、ビルド結果にサーバー用コードが含まれなくなり、静的なファイルだけをまとめた out ディレクトリが生成されるようになります。この out ディレクトリを好きな静的サイトホスティングでHTTP配信するだけで、Webサイトにすることができます。AWS S3 や Firebase Hosting、GitHub Pages などにファイルを置くだけでよくなります。 Next.js なので SSG によって HTML はちゃんとコンテンツを含んでいます。なので SEO 的にも問題ありません。また next/link も prefetch してくれたり SPA のクライアントサイドナビゲーションなので画面遷移も爆速です。 Static
サーバーを使わないNextjs開発(App Router) - Qiita
/** * @type {import('next').NextConfig} */ const nextConfig = { output: 'export', } module.exports = nextConfig Static Exportsはクライアントコンポーネントはもちろん、サーバーコンポーネントにも対応しています。 クライアントコンポーネントはビルドによってプレレンダリングされたHTMLとそれにインタラクティブ性を付与するJavaScriptを生成します。サーバーコンポーネントはビルド時に計算されたHTMLが生成されます。 Static Exprotsはそれらのコンポーネントに関わる生成物に加えて、最初のHTMLを返した後のナビゲーションに関わるコンテンツを生成します。 環境を作成する まず、npx create-next-appでNextjsの環境を作成します。質問には
Next.js（Typescript）＋Tauri（Rust）でのデスクトップアプリ制作 | TKブログ
はじめに本記事では、Typescriptを使用したNext.jsとTauriによるアプリケーション開発のチュートリアルを紹介します。このチュートリアルを通じて、デスクトップアプリケーションの作成に必要なスキルと知識を身につけることができます。 Typescriptでデスクトップアプリを作成する場合、Electronも候補になってきますが、Tauriのほうがメモリや容量がかなり抑えられるアプリが作成できます Next.jsとTauriの基本Next.jsはサーバーサイドレンダリングや静的サイト生成に優れたReactフレームワークです。一方、Tauriはウェブ技術を使って軽量なデスクトップアプリケーションを作成するためのフレームワークです。 Next.jsの詳細については公式ドキュメントを、Tauriについては公式ガイドを参照してください。 今回Next.jsについてはAPPRouterを利用
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
GitHub PageとNext.jsで静的ページを構築 | SIOS Tech. Lab
GitHub PagesとActionsを使用してNext.jsで静的ページを構築する方法について解説していきます。ymlファイルの設定とGitHubのActionsで環境変数を使うところが鬼門でした。誰かの助けになるとうれしいです。 初めに どもども！朝日で部屋の電気をつけずに仕事をしていると夜になることに気付けるなと思ったら真っ暗の部屋にいる龍ちゃんです。今回は【Next.js】で静的ページを公開する方法について説明を入れていきたいと思います。この記事は【microCMS】を用いてのサイト構築をする際の前段階として必要なので、もし【microCMS】【GitHub Pages】【GitHub Actions】【Next.js】というトピックでブログ作成したいと思っている方の助けになればよいなと思っています。 ちなみにですが、【Next.js】と【microCMS】の環境を簡単にデプロイ
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより
【TypeScript】Next.js + Tailwind CSSを使用してさくっとSPAを作る方法
Next.js で簡単な SPA の雛形をつくる際の手順です。 ホームページを Flutter Web から Next.js に移行した際に少し躓いたので整理して記録します。 追記：この記事では従来のWEBアプリケーション(MPA)の対義語としてSPAと表記しています。Next.jsがSPAに分類されるかは様々な意見があるので混乱を招いたかもしれません。たくさんのLIKEと反応ありがとうございます。 環境 執筆時点での各種バージョンです。 Node: 14.17 Next.js: 12.0.4 Tailwind CSS: 2.2.19 TypeScript: 4.5.2 Next.js プロジェクトの作成 下記コマンドで Next.js プロジェクトを作成します。 CreateNextApp を使用すると簡単に TypeScript 対応できて便利ですね。 ソースファイルを src 配下に
Next.jsとAuth0で本管理サイトを作ってみた
Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。 github どんなサイトか？ まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。 Google Book APIに登録されている本を検索して本棚に保存できる 登録されていないなくてもアプリ内で新しく登録できる。 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。 画面遷移 1.トップ画面 アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。 2.ログイン画面 Auth0を使ったログイン画面。認証方法は2種類あります。 Googleアカウントを使ったログイン メールを使ったログイン 3.ホーム画面 今まで読んだ本を管理する画面。最近読んだ本の表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903