[B! Next.js] k1takeのブックマーク

Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita

Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と

k1take 2021/01/03

リンク

Next.js + TypeScript + VercelでJamstackなブログを作るその1 - 環境構築/記事の作成・表示 - zenpachi blog

Next.js + TypeScript + VercelでJamstackなブログを作るその1 - 環境構築/記事の作成・表示 Next.js 9.3よりSSG（Static Site Generation）機能が充実したため試してみたいと思っていたのですが、どうせならなにかを作るかということでこのブログを作り直してみることにしました。 Blog - Next.js 9.3 | Next.js いままでこのブログははてなブログを使用していましたがNext.jsのSSGを使用してJamstackな構成で作り直しています。結論としては、とりあえず基本的な機能のみを利用してミニマムな機能に絞って作ってみましたがそこそこ使いやすく、それほど凝ったことをしなければ実務でも十分対応できそうです。以下は開発の備忘録。説明の都合上実際のファイル構成・コンポーネント粒度やコードの細部は異なる部分も

k1take 2020/12/31

リンク

microCMS + Next.jsでJamstackブログを作ってみよう

この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.js プロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms

k1take 2020/12/31

リンク

2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog

今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た今年は、パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、若干やりすぎと思いつ

k1take 2020/12/30

リンク

3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator

- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、

k1take 2020/12/28

公式よもうとあらためて思った。

リンク

Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代

どうも、@yuyaaar です。最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。まずは最初に Next.js ボイラープレートアプリを作りましょう。作成できたら、まずは TypeScr