Next.js 13 app directory で記事投稿サイトを作ってみよう
Next.js 13 から新たに App Router と呼ばれる機能が追加されました。これは従来の pages ディレクトリとは異なるレイアウトシステムです。App Router には以下のような特徴があります。 ルーティング：pages ディレクトリではページのルーティングはファイル名によって決まっていました。例えば pages/about.js というファイルは /about というパスに対応します。App Router ではルーティングに対応するファイルは page.js という固定の名前になります。/about というパスに対応するファイルは app/about/page.js という名前になるのです。page.js 以外にも共通されたレイアウトを担当する layout.js、ローディング UI を表示する loading.js などさまざまな特殊なファイルが存在します。 レンダ
Next.js 13.4まとめ
基本的には以下のNext.js 13.4のブログを翻訳してまとめたものになります。 TL;DR Appルーター(安定版): サーバーコンポーネント ネストされたルート&レイアウト 簡略化されたデータ取得 ストリーミング&サスペンス ビルトインSEO対応 Turbopack(ベータ版): より速く、安定性が改善されたローカル開発サーバー サーバーアクション(アルファ版): ゼロクライアントJavaScriptでサーバーのデータを更新 半年前にNext.js 13でベータ版としてAppルーターがリリースされましたが、今回ついに安定版となりました(開発スピードが速すぎる…)。 アップデート詳細 Next.js Appルーター 今回のアップデートでは特に新機能の追加はありませんが、安定版となりました。 しかし、Appルーターは2016年にNext.jsをリリースして以来の新時代の始まりを告げる、エ
Next.js App Router (app ディレクトリ) の逆引き辞典
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
Reactのディレクトリ構成について再考する - ロカオプ技術ブログ
概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、Reactのディレクトリ構成について再考する機会があったので、記事にしようと思います。 なお、技術スタックについては以下の記事を参照してください。 tech.locaop.jp Reactのディレクトリ構成について 現状は、フロントエンドのsrc配下は以下のような感じになってます。 @interfaces/ (55) api/ (88) components/ (50) context/ (3) pages/ (136) utils/ (22) これ、ロカオプMEO側だけ書いているんですが、プロダクトもだいぶ成長してきまして、それぞれのディレクトリ内のファイル数がすごいことになってます。 (かっこ内の数字がファイル数です。) それぞれのmonorepo内のディレクトリが、こんな感じです
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
SWR v2 をリリースしました
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
SWR 2.0 の発表 – SWR
本日、SWR 2.0 のリリースを発表できることに興奮しています！この新しいバージョンには、新しいミューテーション API や楽観的更新パターンに対する改善、DevTools、React の並行処理機能のサポートといった多くの改善と新しい機能が含まれています。このリリースを可能にしてくれた全てのコントリビュータとメンテナに感謝しています。 ミューテーションと楽観的 UI 更新 useSWRMutation ミューテーションはデータフェッチングの重要な要素の一つです。ミューテーションはローカルとリモートのデータそれぞれの更新を可能にします。既存の mutate API は、リソースの再検証及び手動による更新をサポートしています。SWR 2.0 では、useSWRMutation という新しいフックは宣言的な API でよりシンプルにリモートのデータ更新を可能にします。このフックを使いミューテ
【Recoil】Reactの状態管理ライブラリ基礎学習 ~リファクタ編~ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、ラクス入社1年目のkoki_matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリのRecoil部分をリファクタするとともにパフォーマンスを上げるためにどうするかについてご紹介させていただきます。 もし、前回の記事を読んでいない方は下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp アジェンダは以下の通りになっています。 Recoilを用いたToDoアプリの問題点 複数人でRecoilを使うときに意図しない状態変更が行われる可能性 無駄な部分まで走る再レンダリング 解決方法 「複数人でRecoilを使うときに意図しない状態変更が行われる可能性」の解決方法 「無駄な部分まで走る再レンダリング」の解決方法 コード修正 TodoStateの修正 Atomの正規化 変更
Recoilにロジックを載せる運用戦略
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではNext.jsおよびReactを使用しています。以前から、自分はaileadのフロントエンドにおいてRecoilの利用を推進する活動をしてきました。実は、筆者が以前に公開した次の記事もその流れを汲んだものです。 Recoilはステート管理ライブラリとして知られていますが、筆者はRecoilのデータフローグラフを構築しその上にアプリケーションロジックを載せられるという点に可能性を感じています。実際、aileadではそのような方向性の設計に取り組んでいます。 そこで、この記事では筆者がaileadにおいて実践しているRecoilの運用を紹介します。 この記事はReact Advent Calendar 2022の8日目の記事です。 ステート更新に反応するならまずselec
[Next.js] Storybook
TypeScriptベースのNext.jsプロジェクトでStorybookを使ってコンポーネント主導開発をしてみましょう。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトにStorybookを入れてコンポーネント主導開発(Component Driven Development)をやってみましょう。 Storybookここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/6.storybookブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポ
![[Next.js] Storybook](https://cdn-ak-scissors.b.st-hatena.com/image/square/42c65e8db30c6c67f722dab5a657df0845bb84a3/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Fstorybook%2Fbackground.jpg)
[Next.js] MUI
TypeScriptベースのNext.jsにUIライブラリであるMUI(Material UI)を追加して使う方法について説明します。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトでUIライブラリであるMUI(Material UI)をインストールして、使う方法について説明します。 MUIここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/8.muiブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポーネント追加[Next.js] テスト[
![[Next.js] MUI](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56373db1eec167d81178ce358ce2ada3a0e1516/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Freact%2Fnextjs%2Fbackground.jpg)
ゼロから始めるStorybook入門(React編) | アールエフェクト
StorybookはアプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるUIツールです。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができます。この説明が最初は”?”の人でも本文書では公式のドキュメントよりもさらにシンプルなコードを利用して動作確認を行なっているのでStorybookの基礎的な利用方法や機能を短時間で理解することができます。 Storybookが利用できるJavaScriptのフレームワーク/ライブラリにはReact以外にもVue.js, React Native, Svelte, Amber, Angularなどがありますが本文書ではReactを利用しています。本文書で動作確認を行なっているStorybookのバージョ
Next.jsにMaterial UIを組み込んだ環境を作る
概要 Next.jsへのMaterial UIの組み込みを行い、簡単に使ってみます。 前提 Next.jsの動作する環境は構築できているものとします。 また、Next.jsはTypeScriptが導入されていることを前提に記載します。 これから環境を作られる方（Windowsの方）は以下参考にしてください。 手順 Material UIとスタイリングエンジンのインストール プロジェクトフォルダ上でnpmかyarnコマンドを実行することで導入できます。 MaterialUIでは、スタイリングエンジンとして、デフォルトがEmotionとなっていますが、styled-componentsも選択できるようになっています。
useReducer + useContext + Typescriptに慣れよう
概要 以下の記事で「useReducer + Typescript」について記事を書きました。 今回はその第 2 弾として、useReducer での状態管理を子のコンポーネントでも使えるようにするために、 useContext と組み合わせた場合にどのようにプログラムを書けば良いかをご説明します。 想定読者 React がなんとなく書けるレベル以上の方 Typescript が基礎レベル以上の方 (型についてわかれば十分) React の useReducer と useContext の使い方がなんとなくでもわかっている方 useContext と useReducer を組み合わせる際に Typescript でどう書くと良いのか悩んでいる方 もし、useReducer について、どのように書けばいいかまだわからない方は、 概要に張りましたリンクの記事を読んでいただければと思います。
useReducer+Typescriptに慣れよう
はじめに これまで React+Typescript での開発において、state 管理を useState で主に扱っていました。 それはなぜか？ ↓ React で最初に useState を学ぶから!!! その後に useReducer を学ぶものの、「useState で state 管理できるからいいじゃん」と考えることを放棄しちゃいました。。。 結構いろんな記事で useReducer と useState の違いを見ていると、 「useState より useReducer の方が良くね？」と思ったので、ここ数か月で useReducer を試しています。 今回、useReducer+Typescript に関して、どのように記述をしていけばよいか手順をまとめました。 想定読者 React がなんとなく書けるレベル以上の方 Typescript が基礎レベル以上の方 (型につ
Next.js 13
As we announced at Next.js Conf, Next.js 13 (stable) lays the foundations to be dynamic without limits: app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactではじめるChrome拡張開発入門
Next.js 13で開発方法はどう変わる？
