こんにちは。 株式会社 ラク スで先行技術検証をしたり、ビジネス部門向けに技術情報を提供する取り組みを行っている「技術推進課」という部署に所属している鈴木（ @moomooya ）です。 今回は最近プライベートで利用するようになったフロントエンド フレームワーク の Next.js について、使えるようになるまでに参考にした情報などをまとめようと思います。 Next.jsは ホスティングサービスを提供するVercel 社が開発しているReactベースのフロントエンド フレームワーク です。このNext.j

こんにちは！スマートキャンプ、エンジニアの関口です！ 私は現在BOXILと連携させる新規アプリケーションの開発に携わっております。 このアプリケーションは、バックエンドAPIはGo 、フロントエンドはTypeScript/Next.jsで構成されています。 このプロジェクトの中で私は認証機能を担当しました。認証機能はAuth0というIDaaSを利用して実装しています。同じ様な構成で認証機能を実装したいと考えている方の理解の助けになればと思い、 このアプリケーションの構成に寄せる形でNext.jsとAuth

こんにちは。フロントエンドエンジニアの 渡邉 です。 普段はReactとTypeScriptを書いています。 今回は自分がNext.js + NextAuth.js + Prismaを使って認証付きアプリケーションを作成する際の土台を紹介をしようと思います。 フロントエンドエンジニアとしてトレンドの技術を抑えておきたいというのと、実際に新規のプロジェクトで開発する際に採用される可能性もあるので、Next.js + NextAuth.js + Prismaといった選定をしています。 技術の概要 Framew

TL;DR (概要) スタメン モバイルアプリGでAndroid・iOSアプリを開発してるカーキです！ 昨年から、プロダクト部の勉強会の主催を担当させてもらっています。 突然ですが、皆さんの会社ではどのように社内勉強会を実施されているでしょうか？ スタメンではこの6月からエンジニアの社内勉強会の方法を一新しました。 今回このブログでは、スタメンの社内勉強会を新たにどのように実施しているのかを紹介します。 今までの勉強会 新しい社内勉強会の紹介の前に、今までどのように社内勉強会を行っていたのかを紹介します。

はじめに 2020年新卒入社で、現在ZOZOWEB部所属の 武井 です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度は スタッフインタビュー記事 の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセ

Core Web Vitalsの計測環境を整える はじめに 現在、MAMADAYSのWebチームでは昨年発表されたCore Web Vitalsを中心としたパフォーマンス改善に注力しています。 今回はパフォーマンス改善でも重要な計測部分について、MAMADAYSではどのようにCore Web Vitalsのデータを定点観測する環境を整えているのかをご紹介したいと思います。 Core Web Vitalsとは Core Web Vitalsとは、全てのサイトにおいて共通してユーザー体験をよくするために重要な

はじめに こんにちは、フロントエンドエンジニアの中畑 ( @yn2011 ) です。 au Webポータル 無料ゲーム では様々なフロントエンドのパフォーマンス最適化に取り組んでいます。今回は、既に実施した最適化の中から 対応コストが小さく、効果が分かりやすかったもの を中心に、対応事例のご紹介をします。 なお、 au Webポータル 無料ゲーム は Jamstack 構成となっており、Next.js (SSG) と ヘッドレスCMS を利用しております。詳細な技術スタックについては ヘッドレス CMS

スマートキャンプでエンジニアをしている瀧川です。 みなさん、NoCode(ノーコード)やLowCode(ローコード)をご存知でしょうか？ 考え方としては昔からありましたが最近国内で急速に注目されてきており、今月始めにはNoCodeツールであるAdaloを使って開発されたアプリが資金調達したことでさらに勢いが増したと感じています。 日本初！Nocodeで作成されたUni

先日commmuneの_app.tsxの整理をしました。 そのときに_app.tsxと_document.tsxとページコンポーネントがどんな順序で実行されるのか混乱したので調べてみました。

先日commmuneの_app.tsxの整理をしました。 そのときに_app.tsxと_document.tsxとページコンポーネントがどんな順序で実行されるのか混乱したので調べてみました。

本記事は Next.js Advent Calendar 2020 の 22 日目の記事です。 こんにちは。旅行プラットフォーム部エンジニアの東川です。 フォルシアではフロントエンドフレームワークとして Next.js を使用していますが、2020年は Next.js にとって激動の年であったといえます。 この 1 年間でバージョンは 9.1 から 10.0 に上がり、SSG(Static Site Generation), ISG(Incremental Static Generation)などの新機能

FORCIAアドベントカレンダー2020 20日目の記事です。 こんにちは、旅行プラットフォーム部の島本です。現在B2C向けの新サービス立ち上げを企てています。 新規事業立ち上げのプロセスの一つにプロトタイプ作成があります。 フォルシアには社内製のWEBアプリケーションフレームワーク（2019年に 新フレームワークを開発 しています）があるのですが、プロトタイプ作成のような信頼性よりスピード性重視の場合には、オーバースペック感があります。 一方で、世の中にはコマンドをいくつか実行するだけでWEBアプリを立

FORCIAアドベントカレンダー2020 16日目の記事です。 旅行プラットフォーム事業部の山門です。 Versel社が現地時間の10/27に開催したNext.js CONFでは、開催当日にver10の発表もあり、なかなかに盛り上がりを見せたのが記憶に新しいですね。 CONFでは画像周りのアップデートが大きく取り上げらていた印象ですが、自分の中では同タイミングで発表されたNext.js Analyticsの方に興味が湧いたので、これを機にNext.js Analyticsについて調べてみました！ Next

この記事はBASE Advent Calendar 2020 15日目の記事です。 devblog.thebase.in こんにちは、Native Application Groupの大木です。最近React.jsを使ったフロントエンドアプリケーションの開発に取り組んでいますが、プロジェクトをmonorepoで管理しています。 今回は、monorepo管理にしたはいいが、Visual Studio Codeエディター(以下vscode)で、TypeScriptのモジュールのautoimportのパス解決に

こんにちは。武田（ @tkdn ）です。 MVP でスタートさせた au Webポータル 無料ゲーム というサービスを、手製のビルドスクリプトと手製のコンフィグで生成していた静的サイトから、Next.js SSG + ヘッドレス CMS へ 9 月にリニューアルしました。 リニューアルした理由に触れつつどうやってデプロイ・運用しているか、あたりを中心に今日は書いていきます。 なお、この記事は Jamstack Advent Calendar 2020 15 日目の記事です。 前提 Next.js Next