独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】RailsAWS初心者個人開発Next.js はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間
Next.js の fetchCache を考える
Next.js App Router は global のfetch関数に patch をあてており、自動でデータ取得が最適化されるように設計されています。そのうちの一つが、取得したデータをキャッシュし、再利用する最適化です。キャッシュされた取得データは、必要に応じて任意のタイミングで Revalidate（データ再取得・キャッシュ更新）が可能です。本稿はこのfetch関数を経由してキャッシュされる「fetchCache」について、どのように向き合うべきか考察したメモです。 検証留意点 はじめに、筆者が検証にあたり留意した点を書いていきます。本稿を読んでみて「自分でも検証してみたい！」となった方は、参考にしていただければと思います。 【1】取得データがキャッシュされるタイミング タイミングは２通りあります。 ビルド時: next buildで Next.js アプリをビルドした時 リクエス
Server Actions が Next.js 14 からStableに！古参フロントエンドが消失しないために知っておくこと
思い出します2年前・・・ VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 定番なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js Conf 、朝まで大忙しでしたね。 （ねむい・・・） Server Actions の一般的な誤解 まず最初に、SNSで話題になっている Server Actions に関する一般的な誤解についてです。 (1) 生のSQLが書かれているというアンチパターン？🤔 一部のサンプルコードでは、生のSQLを直書きしているところがあります。 しかし、以前のプレゼンテーションでも述べられているように、 React Server Component や Server Actions で、この書き方を推奨しているわけではありません。 あくまで「こんなこともできるようになっ
Tauri+Next.jsでモバイルアプリ開発
通称Tauri Mobileのアルファ版がリリースされたのでiOS/Androidアプリが開発できるようになった。(https://laiso.hatenablog.com/entry/tauri-on-mobile から半年) Tauriとは TauriはWeb技術でデスクトップアプリを構成するためのフレームワークで、Electronの代替ツール。アプリのUIをHTML+CSS+JavaScriptで開発し、その裏側のネイティブコードをRustで書いて呼び出すことができる。 TauriのアーキテクチャはシステムにあるWebViewを使ってHTML+CSS+JavaScriptを表示する。アプリ内にブラウザエンジンを含むアーキテクチャを取るElectronではApp StoreレギュレーションによりiOSアプリを開発できないので、Tauri MobileはiOS/Androidのネイティブ
Next.jsを使い続けたい好きなトコロ
ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
Next.js と React-admin を使って簡単な管理画面を作成するチュートリアルをやってみた | DevelopersIO
Next.js 初心者が React-admin を使って管理画面作成に挑戦しています。今回は React-admin 公式ドキュメントにある、Next.js Integration のチュートリアルをやってみました。 はじめに こんにちは、筧(@TakaakiKakei)です。 最近、Next.js と React-admin を使って管理画面作成に挑戦しています。 今回は、React-admin の公式ドキュメントで用意されている、Next.js Integration のチュートリアルをやってみたので、その内容についてご紹介します。 React-admin - My First Project Tutorial 前提 予め、今回の出てくるキーワードについて概要をおさらいしましょう。 Next.js とは Next.js by Vercel - The React Framework
【AWS】Next.js+LaravelをECS+Fargateにデプロイする時のアレコレ | yutaro blog
最近業務でNext.js+LaravelのアプリケーションをAWSのAmazon ECS(Fargate)にデプロイするタスクを担当しているので、デプロイするにあたりNext.js側、Laravel側でやっておくこと、エラー対応などをまとめておく。 ECSへのデプロイはEC2へのデプロイに比べそもそもネットに情報が少ないECSの中でもデータプレーン（コンテナ実行環境）にEC2を使った記事が多くFargateを使った記事はかなり少ないECS+Fargateへのデプロイでも本記事のようなフロントエンド+APIの構成のデプロイ例はマジで少ない という状態で結構苦戦したので、自分で苦戦したことを残しておくとともに同じ構成でデプロイする方に向けて参考になれば嬉しいです。 ECS、ECR、Fargateについての技術説明・全体的なデプロイ作業の手順についてはこの記事では扱わないが、この記事（というかZ
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催しました。 このイベントでGoogleは、これまで静的なWebサイトのホスティングサービスだったFirebase Hostingの新機能として、Next.jsとAngular Universalを用いたサーバサイドレンダリングによる動的なWebサイトにも対応することを発表しました。 これまでFirebase HostingでNext.jsやAngular Universalのようなサーバサイドレンダリングのためのフレーム
Next.js 12.3
We've shipped some quality-of-life improvements to Next.js with 12.3: Improved Fast Refresh: .env, jsconfig.json, and tsconfig.json files now hot reload. TypeScript Auto-Install: Add a .ts file to automatically configure TypeScript and install deps. Image Component: next/future/image is now stable. SWC Minifier: Minification with the Next.js compiler is now stable. New Router + Layouts Update: Imp
追加の記事を作成しました。 ※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 ※現状では、bucketRegionを指定すると、エラーになってしまいます。 https://github.com/serverless-nextjs/serverless-next.js/issues/1111 解決済み serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが！ついに！ つい先日こちらのプルリクがマージされてました。 まだα版ではありますが。 ということで、やってみました！ 結論躓くことなくうまくいきました！ Vercel使わずにも生きていけるかも！ 実際に試した構成 serverless-nex
本文書はNext.jsのバージョン12を元に作成していますが新たにNext.jsのバージョン13に対応した記事を公開しました。 Next.jsはオープンソースのReactベースのフロントエンドフレームワークです。パフォーマンス、SEOやアプリケーションの開発の効率化に関わるFile System Based Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Incremental Static Regeneration(ISR), Image Optimization, Code Splitting, Pre-fetching, Serverless Functions, Fast Refreshなどの機能が事前に組み込まれています。これらの機能を自分で実装しようとすると非常に困難です。しかし自分で実装すること
Next.jsで不要なファイルを一掃する
Knipというツールが便利。JaveScriptやTypeScriptで書かれているプロジェクトの未使用のファイルやexportを見つけることができる。 Find unused files, dependencies and exports in JavaScript and TypeScript projects https://knip.dev/ インストールせずに使いたいのでnpxコマンドを使って実行する。 また、Next.jsのプロジェクトで使いたいのでプラグインを導入する。 上記のプラグインの中にNext.jsがあるのでこれを使う。 knip.jsonというファイルをプロジェクトのルートに配置する。除外したいディレクトリはignoreで指定できる。 { "ignore": [ "hoge" ], "next": { "entry": [ "next.config.{js,ts,c
目次 Next.jsの概要 Next.jsを使うべき5つの理由 Next.jsを使う上での問題点と解決法 まとめ -1. 宣伝 本記事を元にしたNext.jsの入門書、『基礎から学ぶ Next.js』を出版いたしました！ モダンJavaScript/TypeScriptの書き方からNext.jsの概要、さらに最新のReact 18/Next.js 13の内容までカバーしています。ハンズオンも豊富にあり、実際に手を動かしながらNext.jsでのアプリケーション開発を学べる内容になっています。 ハンズオンのコードは以下のリポジトリにあります。 0. TL;DR Next.jsはモダンかつ強力なフロントエンドフレームワークで、様々な長所を持っています。本稿の目的はそうしたポイントをご紹介し、Next.jsの利用を勧めることです。 1章ではまずNext.jsの概要について簡単にまとめます。 2章で
GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
はじめに こんにちは！！@Sicut_studyです！ クラウド破産しかけました！ギリギリ払えるくらいやばかったです！！ 普段サービスを Firbese でデプロイしているのですが、この度自分でサービスをリリースした時に破産しそうになった話を共有していきます。 自分が使うためのサービスとみんなに利用してもらうためのサービスではこの点が大きく違うんだなとしみじみ感じたので、自分以外が使うサービスをリリースする方には参考になるかと思います 0. アラートは突然に とあるメールが自分のもとに届きました !?!??!??!??!?!!!?? やばいまだ11月始まって6日なのに予算の半分を使ってしまっただと！？！ とくにリリースなどは行っていなかったのでなぜか今月になって請求額があがるようになっていました 仕事中にメールが来たのですが、気になりすぎてまったく集中できませんでした😅😅😅😅 1.
SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita
概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの？なんで生まれたの？」 「なんでgetInitialPropsは非推奨なの？」 「Vercel製のSWRってライブラリあるけど、あれ何？」 「てかgetServerSidePropsとSWRって関係あるの？」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで
はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。 公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。 追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.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 Server Actions Next.js 13.4 で、新機能として Server Actions[1] が追加され、バックエンド側のコードをあたかもクライアントから直接呼び出せるかのようにコードを書くことができるようになりました。 リリースブログに掲載されていた Server Actions のコードを見てみましょう。 // app/post/[id]/page.tsx (Server Component) import kv from "./kv"; export default function Page({ params }) { async function increment() { "use server"; await kv.incr(`post:id:${params.id}`); } return ( <form action={increment}
Next.js 9.4
We are excited today to introduce Next.js 9.4, featuring: Fast Refresh: fast and reliable live-editing experience, as proven at Facebook scale Incremental Static Regeneration (beta): re-build static pages after you've deployed, in milliseconds CMS Examples: examples for Contentful, DatoCMS, Prismic, Sanity, and TakeShape using our new next-gen static site generation New Environment Variables Suppo
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
AWS Amplify が効果を発揮する Next.js の 5 つの機能 | Amazon Web Services
Amazon Web Services ブログ AWS Amplify が効果を発揮する Next.js の 5 つの機能 Next.js は、React アプリのサーバーサイドレンダリングと静的サイト生成を可能にする、人気の React フレームワークです。フロントエンドの Web およびモバイル開発者が AWS 上で迅速かつ容易にフルスタックアプリケーションを構築できるようにする目的で構築されたツールおよび機能のセットである AWS Amplify と組み合わせると、開発者は本当に強力なアプリを構築することができます。 本記事では AWS Amplify が効果を発揮する Next.js の 5 つの機能を紹介します。 1. データフェッチと API Next.js は静的サイト生成（SSG）、サーバーサイドレンダリング（SSR）、クライアントサイドレンダリング（CSR）、インクリメン
先日、Next.js+microCMS+VercelのJAMStack構成で、自分のブログを作成しました。 ブログ記事のデータは、microCMSからMarkdown形式で入稿するようにしているのですが、記事の中でブログ内の別の記事へのリンクを貼る時に、Next.jsの<Link>を使えたら便利だな、と思いました。 この記事ではそれをどうすれば実現できるのか、あれこれ試行錯誤した経緯を含めてご紹介したいと思います。 まずはMDXを使ってみた まず最初に考えたのはMDXを使う方法でした。MDXとは、簡単に説明するとJSXをそのまま埋め込めるMarkdown記法です。 ↓以下は公式サイトからの例ですが、こんな感じで.mdx拡張子のファイルに記述できます。Markdownの記法で文章を書きつつ、別ファイルからエクスポートされているReactコンポーネントをインポートし、それをそのまま使うこともで
Next.js と 非同期分割 CSS の悲劇
こんにちは！10 月からリクルートテクノロジーズに join した吉井です。今年は Next.js が大いに盛り上がった年でしたね。本稿では Next.js の CSS 関連で「いつか遭遇するかもしれないバグ」を紹介したいと思います。 これは「あるルール」を守ってさえいれば遭遇することのないバグ、且つ現状の Nex.js の仕組みでは起こり得る事象になりますので、どうしてこの様なことが発生するのか？をきちんと理解することを目的としています。 【バグ概要】色が不規則に変動する 手順 操作
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
Next.jsとVercelの出口はどこにあるのか
# Next.jsとVercelの出口はどこにあるのか 趣味でも仕事でもガッツリNext.jsを使っているという方による『Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな』 という記事を読んで、技術的には色々なことが腹落ちした感があるものの、職業柄というか今働いているところとビジネス的にも近いというかっていう感じで、Vercelが今後どうなっていくのか？っていうのが気になってしまいました。 # VercelのEnterpriseプラン VercelのPricingページにいくと、2020年11月現在、ProとEnterpriseという形で分かれていて、Qiitaの記事によると『最低でも年間数万ドルと、個人開発者やベンチャー企業が手軽に支払える額ではありません。』とのことでした。 確かに、そんなにお安いものではないかもしれないのですが、例えば年間500万円と
'RSC'.reverse() == 'CSR' 現状公開されている情報から、Edge Functions を起点に Component を Streaming することが Vercel x Next.js x React 18 のゴールに見える。Edge Functions で RSC(React Server Components) を SSR するメリットは以下の様に考えている。 物理的に近い Edge サーバーなので速い V8 Isolete 実行環境のため立ち上がりの速い（Node 依存の Serverless より速い） CSR と比較しラウンドトリップが少ない このPR で Next.js に Server Components を導入した Shu Ding 氏がピン留めしている以下ツイートは必読。
GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへ - Qiita
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへRelayGraphQLNext.js はじめに 最近 Next.js ベースのプロジェクトに GraphQL クライアントとして Relay を導入したのですが、これが端的に言ってめちゃくちゃ大変だったので記事にしました。 チームの試行錯誤の結果を余すところなく伝えたいと張り切りすぎた結果死ぬほど長くなってしまったので、「いいからコードはよ」という方は 最終的にこんな実装になりました (コード編）をご覧ください。 謝辞 愛するチームメンバーのみんな。これまでの道のりで私を支え、愛してくれたみんながいなければ、この記事は完成できなかったと思う。 また、この記事が世に出せたのは、スーパーテクニカルアドバイザーである koichik さんの
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお話します。
Next.js + CSS ModulesでFOUC（CSSの適用遅れによるちらつき）が発生したときの暫定対策
Next.js v10.0.6時点の情報です。最新の情報はこちらのIssueを追うのが良さそうです。 https://github.com/vercel/next.js/issues/18769 Next.jsに根本的な原因があるかどうかはまだ確認できていません 発生していた問題 はじめて https://zenn.dev を読み込んだときに、一瞬スタイルがあたっていない状態で表示されてしまう問題が発生していました。 いわゆるFOUC（Flash of unstyled content）と呼ばれる現象です。少し遅れてスタイルがあたるため、ちらつき・がたつきが生じてユーザー体験がよくありません。 ちなみに発生する条件は以下です。 Next.js で CSS Modulesを使用（styled-componentsでは問題なし） 後述のIssueではstyled-jsxでも同じ問題が報告されて
GitHub - vaaaaanquish/wasm_lindera_example: rust + lindera + webassembly + next.js + typescriptで形態素解析するサンプル
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは、よしこです。 今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1 「フロントエンド × 設計」 開催レポート Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート それではさっそく今回のセッション資料と動画アー
以前、microCMS と Next.js でブログを作るというブログを書いたのですが、microCMS から公式の SDK が提供されていたので書き換えてみました。 前回と比べ、大きく異なる点は以下の 2 点になります。 microCMS JavaScript SDKを使うため、aspidaは未使用 Next.js のバージョンを 10 から 11 にアップデート ここではこれら変更点についてのみ扱います。それほど変わらない点については、前回の記事をご参照ください。microCMS の API はまったく同じものを使用しています。 完成したコードのリポジトリは下記になります。 https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example インストール まずは Next.js をインストールしましょう。TypeScript は
Next.js 13 和訳
雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 app/ Directory (beta): より簡単に、より速く、クライアント側JSのサイズをより小さく。 Layouts React Server Components Streaming Turbopack (alpha): Rustで実装したWebpackの代替バンドラーで最大700倍高速化。 New next/image (stable): ネイティブブラウザの遅延ロードを利用し、より高速に。 New @next/font (beta): レイアウトシフトをゼロにする自動セルフホストフォント。 Improved next/link: APIを簡素化し、<a>タグを自動的に表示するようにしました。 次のコマンドを利用して更新出来ます。 app/ Directory (beta) Next.jsで最も愛されている機能の
はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを作成する日記① Tailwindを導入できた ComponentにPropsを渡せた Componentの中でPropsを使用できた Componentをループを使って表示できた React Iconsを導入できた Next.jsでTODOアプリを作成する日
Next.js 8
Next.js 8 introduces Serverless Mode, smaller bundles, performance improvements, and more.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js App Router Training
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
入門者は基礎からしっかり理解Next.jsの基本(React) | アールエフェクト
Next.jsを使うべき5つの理由 + 実装Tips - Qiita
Next.jsとGoを使っていきます - トレタ開発者ブログ
Next.jsをFirebaseにデプロイしたら高額請求がきて貯金がなくなりかけた話 - Qiita
Next.jsにおけるCSSの取り扱い方法 2020年9月版
Next.js Server Actions の裏側を理解したくて動きとコードを追う
Next.js で React Compiler を試しつつ出力コードを見てみる
Markdownのサイト内リンクをNext.jsの<Link>にしたい
Next.js の API Routes から SWR の型推論を導く
Next.js 12 x React 18 について調べたメモ
Encraft #4「React/Next.js 最前線」開催レポート
microCMS と Next.js でブログを作る（SDK 版） | DevelopersIO
Next.jsでTrello風タスク管理アプリを作成する日記⑤ - Qiita