こんにちは、屋根裏エンジニアの折戸です。 今回はNext.jsアプリケーションをCI/CDするための設定手順についてのご紹介です。 構成 前提 事前準備 ミドルウェア ローカル環境へNext.jsアプリケーションを作成 npxコマンドでNext.jsアプリケーションを作成 npm build & start 起動したアプリケーションへアクセス アプリケーションを停止 Git 作業 GitHubにリポジトリを作成 ローカル環境のアプリケーションをGitHubリポジトリへ push EC2 アタッチ用ロール

はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。 WEAR では現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。 なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新

こんにちは、スタメンエンジニアの手嶋です。普段はRuby on RailsやReactなどの技術を用いて開発しています。最近は フィーチャーチーム体制に切り替わったこともあり 、AWSなどの技術にも触れる機会が増えました。 これまで複数のプロジェクトにおいて React(TypeScript) で開発を行ってきました。そんな中でやはり型の恩恵を感じることが多かったのですが、バックエンドも含めて TypeScript でアプリケーションを作成してみたいという想いが湧いてきたので、個人開発として Next.j

こんにちは。TIMELINE開発部の齊藤です。好きなエディタはEmacsです。社内の一部エンジニアからは珍獣扱いされてますが、Emacsは最強のエディタなので20年近く愛用しています 1 。 さて、皆様は日頃のサービス運用に、社内向けの管理サイトなどを作っているかと思われますが、弊社でもご多分に漏れず管理サイトを用意して、日々の運用を行なっております。 この管理サイトの出来不出来によっては、運用コストも大きく変わったりするので、案外重要なものだったりするのですが、作るのは正直めんどくさいです。 ユーザさん

こんにちは、エンジニアのみーや（ @miiya387 ）です。 Reactのフレームワーク「Next.js」への入門として、公式チュートリアルを何回かに分けてまとめていきます。 今回は4つ目の pre-rendering and Data Fetching です。 それ以前の章を知りたい方は Reactのフレームワーク”Next.js”を触ってみた「アプリ新規作成 / ページ遷移 / スタイル設定」 をご覧ください。 Create a Next.js App Navigate Between Pages

こんにちは、エンジニアのみーや（ @miiya387 ）です。 今回はReactのフレームワークである「Next.js」を公式チュートリアルをもとに触ってみました。 普段の開発ではReactを使用しているのですが、最近フロントエンド関連の記事でNext.jsをよく目にするようになったので、基本的な機能をチュートリアルを通して触ってみて知ったことをまとめたいと思います。 Next.jsとは？ Next.jsはReactベースのフレームワークです。 公式の導入部分にて、Reactを使ってWebアプリケーション

はじめに 上野です！ 今回はVercelにNext.jsのアプリをデプロイし、独自ドメインの紐付けまでを行っていきたいと思います！ Vercelとは? VercelはNext.jsを開発しているVercel lnc.提供しているサーバーレスプラットフォームです。このVercelを利用することによって手軽にNext.jsのアプリケーションをデプロイすることができます。 また、サーバーレスプラットフォームになっているためサーバー側の設定もほぼ自動的に行ってくれて、SSL暗号化やキャッシュの無効化、圧縮による軽

キャディでエンジニア採用を担当しております片渕です。 今回は2022年2月22日に開催したイベント『【画面キャプチャ禁止】うちの管理画面フロントエンドほぼ全部見せます！ 』に登壇のエンジニア（先山・小倉・桐生）からのプレゼン内容をまとめたものをご紹介していきます。 イベントのアジェンダとしては以下の通りです。 生産管理の管理画面（先山） （実際の管理画面をご覧いただきながらデモ） Kleinのソフトウェアのアーキテクチャ 生産パートナー向け管理画面（小倉） （デモにて見積もり回答の様子を説明） UI/UX

AlphaDrive、NewsPicks兼務でエンジニアしている大場です。 最近はNewsPicks Webの新基盤開発を行っています。 新基盤はNext.jsで開発していてAWSのFargateで構築しているのですが、このFargate上で取得したログをS3、New Relicに送るためにFluent Bitを導入しました。 今回はローカルでの実行・確認方法と、導入の過程で問題になったことを紹介します！ Fluent Bit とは ローカル実行・確認方法 イメージの選択 設定ファイルの準備 デバッグ用の

初めに こんにちは、スマートキャンプ エンジニアの林です。 前回は私の 自己紹介記事 でしたが、今回は技術的な話をしたいと思います。 現在、Webフロントエンドを書くならNuxt.jsかNext.jsが選択される事が多いですが、皆さんはどちらがお好きですか？ 私はVue.jsを使用したフロントエンド開発の経験が長いので、Nuxt.jsに親和性が高く、Next.js(React.js)の時代とされる今でも積極的にVue.jsを追いかけています。 そこで今回は旬なフレームワークであるNuxt3について書いてい

はじめに ローカル汚したくないマンの佐々木です。 しばらくDockerを使っていながらも、インテリセンスを効かせるためであったり、デバッグするためにローカルにnodeを入れたり、pythonを入れたりしていました。 これってDocker使ってる意味薄くない？と思いつつ、作業は進めないといけない…という葛藤の中、ずるずるとここまできてしまっていました。 今回は、開発に必要なものは全てコンテナに入れ込んで、クリーンなローカル環境を維持する VSCode Remote Containers を活用し

こんにちは。CTOの松谷です。現在はCTOとTUNAG開発部部長を兼務しており、CTOとして会社全体の技術統括を行いながら、TUNAG開発部長として開発組織マネジメントを担っています。 本記事では、スタメンの創業事業である TUNAG について、プロダクトと開発体制の紹介をします。 目次 TUNAGについて 開発体制について 技術スタック アーキテクチャ 開発組織 開発組織の変遷 フィーチャーチーム 開発プロセスについて おわりに TUNAGについて TUNAG（ツナグ）は、エンゲージメント経営の実践を通

こんにちは。 NewsPicks Web Product Unit の芥川（@aku11i）です。 NewsPicks の新Webフロントエンド基盤でNext.js・TypeScriptを使用した開発を行なっています。 今回、プロジェクトに reCAPTCHA (v3) を導入しました。 読み込みタイミングなどパフォーマンスに気を遣った実装をすることができましたので紹介したいと思います！ 実装方針 読み込みタイミングを制御する 外部ライブラリを使用しない React Hooks で実装する 使い方 事前準

目次 はじめに FANTSとは 技術について 組織について 開発体制 エンジニア おわりに はじめに FANTS事業部の開発部の部長をしている田中( @sukesan_st )です。2021年9月から開発部門の部長としてチームのマネジメントをしています。去年は料理とサウナにハマった1年でした。 私の経歴を簡単に紹介しますと、以下の通りです(FANTSに関連する出来事を抜粋) 2019年4月にスタメンに入社 2020年3月〜6月にFANTS立ち上げの開発メンバーとして参画 2020年7月からFANTS提供開

こんにちは、屋根裏エンジニアこと 技術1課の折戸です。 屋根裏併設のバルコニーにもとうとう雪が降りました⛄ いよいよ暖房器具の購入を検討したほうがいいかもしれません。 今回は AWS Amplify ホスティングでNext.jsアプリケーションをホスティングしてみましたので、その手順と動作確認方法をご紹介します。 AWS Amplify ホスティングとは 事前準備 ローカル環境へNext.jsアプリケーションを作成 npxコマンドでNext.jsアプリケーションを作成 npm build & start