実践Next.js - App Router への理解を深めるために -
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
今更ながらNext.jsに入門した - maru source
こんにちは丸山@h13i32maruです。すごい今更ながらNext.jsに入門したので感想をメモしておこうと思います。 入門資料 @hokacchaさんがクックパッド社のインターンシップ用に公開している動画を見て入門しました。要点がコンパクトにまとまってるので、これを見れば基本は理解できるようになってよかったです。 SSG CodeLunch.fmのサイトをNext.jsのSSGで作り直しました。もともとreact-dom/serverのrenderToString()を使ってなんちゃってSSGを自前で実装していたので、移行は簡単でした。getStaticPropsやgetStaticPathsの仕組みはうまいこと考えられてていいな〜と思いました。 それと、データを特に持っていない本当の静的サイトでもNext.js使ってSSGで作るのは良さそうと思いました。サイト内のパーツをReactコン
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
Next.jsにReduxを実装してみて
はじめに 新しい Next.js のプロジェクトに、ログイン情報など page 層をまたぐ値を格納する Store を導入したく、Redux を触ってみた 間違いやもっといい方法がある場合はどしどしご指摘くださいませ 記事のターゲット Redux を導入しようとしてる人 基本は page でステート管理するけどグローバルな情報だけ store を使いたい(ライトに redux 使いたい)人 概要 ざっくりイメージ @reduxjs/toolkit で state の管理 react-redux で react と bind してる 環境 Redux(+localStorage とバインドさせるために)を入れるためにインストールしたもの yarn add @reduxjs/toolkit redux-persist react-redux yarn add -D @types/react-r
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
Next.js でのレイアウトの作り方と切り替え方
import React from 'react' import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' import Header from 'components/Header' import Nav from 'components/Footer' import Footer from 'components/Footer' import Home from 'pages/Home' import PageA from 'pages/PageA' import PageB from 'pages/TermsB' import NotFound from 'pages/NotFound' export default function App() { return ( <Router> <La
Next.jsを勉強してみる その① 〜何も考えず環境構築編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。 とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。 Next.jsとは Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。 今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。 とりあえず、立ち上げるまで頑張ってみる next.jsインストール # ルートディレクトリにsrcフォルダを作成・移動 mkdir src && cd src # Next.jsのアプリケーションの雛形を作成 $ npx create-next-
Routing: API Routes | Next.js
API RoutesExamples API Routes Request Helpers API Routes with GraphQL API Routes with REST API Routes with CORS Good to know: If you are using the App Router, you can use Server Components or Route Handlers instead of API Routes. API routes provide a solution to build a public API with Next.js. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
Next.js公式examples集を分類（2020年7月版） - Qiita
更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） はじめに Next.jsの公式サンプルは現在236本あります。（2020/07/22） しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎）Next.jsで基礎的な内容を扱っているサンプル。 （公式）公式ドキュメント で説明するのに使われているサンプル等。 degitを使ってソースのみを取得したい（npx create-next-appをつかってインストールまではしなくていい場合） Next.js公式examples集 Next.
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ
Vercel製のuseSWRはReactの非同期データ取得をラクにする SWRとは、Next.jsを作成しているVercel製のライブラリです。**SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。**このライブラリはなんとGitHubスター数を10,700も獲得しています。 SWRはライブラリ名で、stale-while-revalidateというRFC 5861で策定されたキャッシュ戦略の略称です。このSWRがデータ取得の扱いをラクにしてくれて最高なのです。 React開発者が嬉しいuseSWRの書き心地 useSWRは外部APIからのデータ取得、ローディング状態、エラーが発生した時をシンプルに記述できます。これがあらゆるReact開発者にとって（というか、ReactでAPIにリクエストを頻繁に送るアプリケーション
2020年師走における Next.js をベースとしたフロントエンドの環境構築
さて、今年ももう終盤。12 月ですね。 今年のはじめに考えていたことが出来たのかといえば、出来ていないというのが正直なところです。とはいえ、別に後悔はなく、やりたいことが増えて優先順位を大きく変えただけの話ですかね。まあ、残された時間は有限ですので、その辺のコントロールもしなきゃなと思いつつダラダラと過ごしている日々です。 そして 12 月といえば、そうですアドベントカレンダーですね。 実は私、今年の 3 月頃に以下の記事を書いたんですよ。 それをアップデートしたのがこの記事であり、Next.js Advent Calendar 2020 3 日目の記事となります。 一部修正というよりは、ほとんど書き直しています。たった 9 ヶ月ほど前の記事なのですが、既に古くなっていると感じたがゆえの書き直しです。構成自体はそこまでは大きくは変わらないのですが、Next.js そのものや個々のモジュール
Next.js - Qiita
https://zeit.co/blog/next の翻訳です。 > Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) and Tony Kovanen (@tonykovanen) > 2016年10月26日 私たちは、サーバレンダリングされるユニバーサルなJavaScriptウェブアプリのための小さなフレームワークであり、ReactやWebpack、Babel上に構築され、このサイト（訳注: https://zeit.co ）を動作させているNext.jsをオープンソース化することをとても嬉しく思います！ (Next.jsの"Hello World") Next.jsを使い始めるには、package.jsonを含む新しいディレクトリ内で次のように実行してください。
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
