ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
誰が書いてるか 仕事でDDD・TypeSafeな開発を経験し、個人で進めていたNext.jsのプロジェクトに T3Stack バックエンドでのDDD を取り入れたくなったTypeScriptエンジニアです。 T3Stack "The best way to start a full-stack, typesafe Next.js app" な技術スタックです。 特に、 Prisma tRPC を使ったTypeSafeな開発体験が素晴らしいです。 このプロジェクトでも、 Prismaの型提供 tRPCの フロント-バックエンドAPI 間の型の直接共有 の恩恵を大いに受けています。 全体構成 Next.jsのモノリス構成で、package.jsonも1つだけです。 ディレクトリ構成は以下のような感じです。 （関係の深い所を抜粋しています） src ∟components ∟... ∟prism
2023年9月12日に登壇したThink! FRONTEND by DMM.comにて発表した資料です。
テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー＆ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。（機械翻訳） shadc
https://findy.connpass.com/event/306714/
はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまったので、気になる部分だけ読んでみても良いのだ！ フロントガチ初心者の方は読んでるだけでも勉強になると思うので、暇な時にのんびり読むことをお勧めするのだ！ 対象読者 フロントを勉強し始めた初学者さん フロントがメイ
まえがき 記事の内容 Cloudflare PagesにデプロイしようとしたらPrismaが元凶で超苦労したので記事にします。 もう少し詳しく言うとCloudflare Pagesにデプロイするために必要なEdge runtimeをPrismaで使うためには設定が必要だったことです。 これからはメインのデプロイ先をCloudflare Pagesにしようと思っているので、今後の自分に対して道標を残しておきます。 結論 結局、PrismaのドキュメントにあるDeploy to Cloudflare Workersの通りすれば、あっさり解決しました。 ただ、1から10まですべて同じようにするのではなく、自分の環境に合わせて読み替えて進めていきます。 ブログアプリを開発中 今、Markdownで投稿できるブログアプリを開発しています。 技術スタックはNext.js、TypeScript、Pris
みなさんこんにちは！ 2023年は「Cloud Run を触って覚える」をテーマとした一人アドベントカレンダーを一人で開催したいと思います。Cloud Run のさまざまな機能や、Cloud Run でよく使う構成などを実際の使い方と一緒にご紹介したいと思います。 初日は、私自身がデモなどでよく使う Next.js を Cloud Run にデプロイする方法を紹介します。 Cloud Run の概要は技術評論社さまのブログ「gihyo.jp」に寄稿した記事で解説していますのでこちらもぜひご覧ください。 Next.js アプリの作成 まずは Cloud Run でホスティングする Next.js のサンプルアプリを作ります。 Dockerfile 付きのサンプルアプリは Next.js 公式として公開されているので、コンテナ化した Next.js アプリは簡単に作ることができます。 FROM
はじめに Vecelを使ったデプロイが一番簡単ではありますが、 今回は、AppRunnerを使ったデプロイを行います。 試しにソースコードリポジトリから作成したので、その時の手順を記事にします。 とってもお手軽でした! しかし、記事作成時、EOLを過ぎているNode16までしかランタイムが対応していなかったため、 ソースコードデプロイは、プロダクトで使うことはできないです😭 便利なのに、、 プロジェクト作成 githubかbitbucketにプッシュする サービスの作成 「サービスの作成」をクリック 以下の画像のように入力 以下の画像のように入力 サービス名だけ変更して次へ 何も入力せず、下まで行って「作成とデプロイ」を押す 以上でデプロイ完了です!! おわりに デプロイが終わるのに大体10分以上かかりました。長い! 冒頭で書きましたが、現時点でNode16までしか対応していないです😭
概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご
はじめに 今回はフロントエンドにNext.js、バックエンドにPythonを採用して、Webサイトの環境構築を行いたいと思います。元々、Whisper APIとVOICEVOXによる合成音声を使用した会話アプリを開発したかったのですがですが、環境構築の段階でかなりのボリュームになった為、一旦記事として共有します。 モノレポについて モノレポとはWebアプリの全てのコード（WebバックエンドやWebフロントエンド）を単一のリポジトリに保存するパターンを指します。 リポジトリを単一化することのメリットは、複数のチームで開発を行う際に、バックエンドとフロントエンドでコードを使い回すことができたり、コードの調査、変更の追跡が容易になる点です。 アプリケーションの概要 今回実装したコードは以下のリポジトリに格納しています。アプリの実装も入ってくるので少し見にくいかもしれませんが、ご容赦ください。 フ
import type { FirebaseApp } from "firebase/app"; import type { Auth as FirebaseAuth } from "firebase/auth"; import { getApps, initializeApp } from "firebase/app"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; /** * @description Firebaseの管理画面から取得したAPIオブジェクト * @note 環境変数は`.env.local`ファイルに定義しています */ export const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KE
この記事はNext.js 12.xのLayouts機能です。 Next.js 13.xのLayoutsについては公式を参照してください https://beta.nextjs.org/docs/routing/pages-and-layouts Next.jsのLayoutについてTypeScriptの記事を探してもあまり見つからなかったので Layoutsとは🤔 ページ間で共通のコンポーネントを定義する機能 HeaderやFooterなどはほぼ全ページ同じレイアウトを使うけど、ページコンポーネントに直接書くとコンポーネントの状態（入力値など）が保持できないのでページコンポーネントの外に書くことでレイアウトの状態も保持できる🤝 検証に使ったリポジトリ Next.jsのLayoutsを使うと何が嬉しいのか 一部共通ではないページが有る場合もページ単位でLayoutを変えられるので対応可能
事前準備 Vercelとは Git Hubと連携 Vercel アカウントの作成 まとめと機能 今回は、Next.jsプロジェクトをデプロイする方法について解説します。 デプロイ先には多くの選択肢がありますが、代表的なものに「Cloudflare Pages」や「Netlify」があります。 この記事では、「Vercel」と「GitHub」を組み合わせてサイトを公開する方法を紹介します。 GitHubはコードのホスティングに使用されます。 一方、ビルドやサイトの公開にはVercelが活用されます。 幸いにも、この方法は複雑な操作を必要としませんので、安心して取り組むことができます。 事前準備 ・ Next.jsプロジェクト ・ Git Hubアカウント ・ VS Code(Visual Studio Code) デプロイするにあたり、Git HubアカウントとVS Code(Visual
はじめに プロジェクト構成 Next.jsにおけるプロジェクト構成とディレクトリの役割 ルートディレクトリファイル 最後に はじめに 前回のNext.js入門に続き、本日はNext.jsでプロジェクトを構造化する方法について説明していきます。 前回の記事は以下となります。 dev-k.hatenablog.com Next.jsに適したフォルダ構造を自分で考えることは一般的です。 Next.jsにはページレベルでの最適化が存在し、ビルド時にログに記録されたページが表示されます。 すべてのコンポーネントファイルは「pages」フォルダ内でページとして処理されます。 そのため、ページに関係のないコンポーネントを「pages」フォルダに配置すると、ビルド時に不要なコンポーネントがページとして処理され、ビルド時間が増加してしまいます。 今回は、個人開発や小規模なチーム開発向けのNext.jsフォル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
