【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
Developers are increasingly relying on AI coding assistants to accelerate our daily workflows. These tools can autocomplete functions, suggest bug fixes, and even generate entire modules or MVPs. Yet, as many of us have learned, the quality of the AI’s output depends largely on the quality of the prompt you provide. In other words, prompt engineering has become an essential skill. A poorly phrased
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい | フューチャー技術ブログ
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？ という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にI
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
Couple of weeks ago when I was publishing The Hidden Cost of URL Design I needed to add SQL syntax highlighting. I headed to PrismJS website trying to remember if it should be added as a plugin or what. I was overwhelmed with the amount of options in the download page so I headed back to my code. I checked the file for PrismJS and at the top of the file, I found a comment containing a URL: /* http
Next.js 13 vs Remix: An In-depth case study — Prateek Surana
When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limelight since last year when they released their biggest update to the framework ever with the app router. Th
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
こんにちは！吉波です！ 最近、AIエージェントフレームワーク「Mastra」が彗星の如く現れました。衝撃的だったのが、こちらの画像↓ 「LangChainのGithubスター数を抜き去った…！？」 これを見た時、衝撃が走りました。LLMを用いたアプリケーション開発を効率的に行うためのライブラリとして、長らく君臨してきたLangChainが抜かされたという事実は、全世界が驚いたはずです。 そこで今回は、これからMastraを触ってみたいと思う方に向けて、Mastra公式が出しているサンプル集を紹介します！AIエージェントの作り方を学びたいなと思っている方はぜひ最後までご覧ください！ また、今日から「吉波塾」というAI駆動開発やAIエージェントに関する講義を開始したので、そちらも良ければご参加ください！☺️ 次回の開催はX（@yoshi8__）より共有します！ Mastraのサンプル集今回の記
公式ブログによると、Laravel Boostは17,000以上のベクトル化されたドキュメントにアクセスし、使用しているLaravelのバージョン固有（10.x、11.x、12.x）の情報を提供する仕組みになっているとのことです。 Laravelに特化したガイドラインを生成してくれる AIエージェントを活用したLaravel開発でよく起こる問題（バージョン差異によるディレクトリ構造の違いなど）を防ぐためのガイドラインを作成してくれます。 公式ブログでは、このガイドラインについて以下のように説明されています。 These are composable, version-specific rules that nudge the agent to follow conventions, add tests when appropriate, use the correct APIs, and
Core Changes fix(types): allow nonpromise return types for static functions: #24685 Ensure history navigates correctly with dynamic routes + basePath: #25459 Fix external check for non-local next import: #25518 Ensure providing only query on dynamic route works as expected: #25469 Assume a recent react@experimental if reactRoot is set: #25496 Update to latest webpack 5 and webpack-sources: #25558
When we announced Connect-Web a few months ago, we were thrilled to finally bring Connect to JavaScript and, more specifically, to the browser. Since then, we’ve seen usage continue to grow and have received valuable feedback from the community. When Connect-Web was released, however, we promised that we’d soon provide a solution to extend the benefits of Connect from the frontend to the backend.
こんにちは丸山@h13i32maruです。すごい今更ながらNext.jsに入門したので感想をメモしておこうと思います。 入門資料 @hokacchaさんがクックパッド社のインターンシップ用に公開している動画を見て入門しました。要点がコンパクトにまとまってるので、これを見れば基本は理解できるようになってよかったです。 SSG CodeLunch.fmのサイトをNext.jsのSSGで作り直しました。もともとreact-dom/serverのrenderToString()を使ってなんちゃってSSGを自前で実装していたので、移行は簡単でした。getStaticPropsやgetStaticPathsの仕組みはうまいこと考えられてていいな〜と思いました。 それと、データを特に持っていない本当の静的サイトでもNext.js使ってSSGで作るのは良さそうと思いました。サイト内のパーツをReactコン
Welcome to Solito | Solito
Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps. AboutThis library is two things: A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms.A set of patterns and examples for building cross-platform apps with React Native + Next.js.MotivationIn 2021, I spoke at Next.js Conf about how I built beatg
Date: June 23, 2023 | Estimated Reading Time: 31 min | Author: Lilian Weng Building agents with LLM (large language model) as its core controller is a cool concept. Several proof-of-concepts demos, such as AutoGPT, GPT-Engineer and BabyAGI, serve as inspiring examples. The potentiality of LLM extends beyond generating well-written copies, stories, essays and programs; it can be framed as a powerfu
本文書ではブラウザを利用したテスト自動化ツールを利用した経験がない人、これから Playwright を使ってみたいという人を対象に Playwright の基本的な操作方法について説明を行っています。Vue と React のプロジェクトでの Playwright の利用方法についても後半に説明しています。 Playwrightとは Playwright は WEB アプリケーションのテストを自動化するオープンソースのテストツールです。Playwright ではユーザが実際にブラウザを利用して WEB アプリケーションの操作を行う代わりにプログラムを通してブウラザ(Chromium、Firefox、WebKit)を動かすことで WEB アプリケーションのテストを行います。ツールを利用しない場合は機能を追加/更新する度に開発者がブラウザでページを開き動作確認を行う必要があります。Playw
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns Introduction 🔗︎ Today, the state of React and its ecosystem is complicated and fractured, with a mixture of successes, skepticism, and contention. On the positive side: React is the most wide
VTeacher所属のMassです。 React 19 のサンプルコード React 19 についてですが、2024年5月に RC 版が発表され、同年12月に安定版となりました。すでに2ヶ月以上が経過しており、目新しいものではありませんが、整理の意味も込めて記事にまとめました。 リポジトリ (GitHub) Next.js を前提としたサンプルコードを用意しました。 ver 15 です。 https://github.com/rgbkids/react-19-examples 動作確認 (Vercel) サンプルコードは Vercel にデプロイしてあるので、動作確認にご利用ください。 https://react-19-examples-three.vercel.app/ サンプルコードの説明 1. useTransition useTransition自体はv18からありますが、v19か
Introducing the Awesome GitHub Copilot Customizations repo - Microsoft for Developers
Today we’re excited to announce the launch of the Awesome GitHub Copilot Customizations repo! The Awesome Copilot repo is a community-driven resource with custom instructions, reusable prompts, and custom chat modes that helps you get consistent AI assistance. In other words, Awesome Copilot helps you get the most out of GitHub Copilot by letting you tailor it to your needs. And even better, the a
Blogged Answers: My Experience Modernizing Packages to ESM
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Details on the painful experiences and hard-earned lessons I've learned migrating the Redux packages to ESM Table of Contents 🔗︎ Introduction Redux Packages Background Packages and Configurations Issue History Early Attempts Migrating to Vitest Initial Alpha Testing
In the past few weeks, since the disclosure of the critical security vulnerability in React Server Components (RSC), there’s been a lot of interest in the RSC protocol. The RSC protocol is the format in which React trees (and a superset of JSON) get serialized and deserialized by React. React provides both a writer and a reader for the RSC protocol, which are versioned and evolved in lockstep with
Local-first software: You own your data, in spite of the cloud
Cloud apps like Google Docs and Trello are popular because they enable real-time collaboration with colleagues, and they make it easy for us to access our work from all of our devices. However, by centralizing data storage on servers, cloud apps also take away ownership and agency from users. If a service shuts down, the software stops functioning, and data created with that software is lost. In t
Turbopack Dev is Now Stable
Back to BlogMonday, October 21st 2024 Turbopack Dev is Now StablePosted by It's been a long road, but we are happy to announce that next dev --turbo is now stable and ready to speed up your development experience. We've been using it to iterate on vercel.com, nextjs.org, v0, and all of our other applications with great results. Since its release 8 years ago, Next.js has been used to build everythi
Vite 8 Beta: The Rolldown-powered Vite December 3, 2025 TL;DR: The first beta of Vite 8, powered by Rolldown, is now available. Vite 8 ships significantly faster production builds and unlocks future improvement possibilities. You can try the new release by upgrading vite to version 8.0.0-beta.0 and reading the migration guide. We're excited to release the first beta of Vite 8. This release unifi
Who doesn’t love a good front-end tool? In this roundup, you’ll find useful front-end tools that were popular last year and will help you speed up your development workflow. Let’s dive in! Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These t
0. リポジトリの概要 ディレクトリ構成 こちらの記事が非常に魅力的でしたので参考にさせていただきました。 アプリケーションによってしまうところはあるかと思いますが、個人的に技術を試す時などもディレクトリで 迷いたくないので自分の中でのデファクトスタンダード的なものを根付かせたいと思い テンプレート段階でディレクトリ構成にも関与することにしました。 含めるもの 方針としては、汎用性の高いテンプレートリポジトリとしたいのでアプリケーションの土台としても使えるし、 ちょっとした試したいライブラリの環境としても使えるようなものを想定しています。 その為、最近Storybookを使っていたり、Next.jsでSSRするならばnext-seoのようなものも欲しいところですが ここら辺は一旦含めておりません。 またスタイリングに関してもTailwindを使ったりChakraUIを使ったりバラバラなので
How Functional Programming Shaped (and Twisted) Frontend Development A friend called me last week. Someone who’d built web applications back for a long time before moving exclusively to backend and infra work. He’d just opened a modern React codebase for the first time in over a decade. “What the hell is this?” he asked. “What are all these generated class names? Did we just… cancel the cascade? W
As I've been using Next.js professionally on my employer's web app, I find the core design of their App Router and React Server Components (RSC) to be extremely frustrating. And it's not small bugs or that the API is confusing, but large disagreements about the fundamental design decisions that Vercel and the React team made when building it. The more webdev events I go to, the more I see people w
Advanced React in the Wild
Advanced React in the WildProduction Case Studies from Ambitious Web Projects (2022–2025) Introduction React and Next.js have powered some of the web’s most ambitious projects in the last few years. In this period, teams have pushed the envelope on performance (achieving dramatic gains in Core Web Vitals like LCP and the new INP metric), balanced server-side and client-side rendering trade-offs, d
アプリケーションの権限設計について調べていたところ、以下の記事に出会いました。 アプリケーションにおける権限設計の課題 - kenfdev’s blog 権限設計で考えなければいけないことがまとまっていて、とても参考になりました。ありがとうございました。 上記の記事を読む中で RBAC(Role-Based Access Control) ABAC(Attribute-Based Access Control) あたりを試してみたくなりました。 ただ、スクラッチで作るには時間がかかりそうだったため、記事で紹介されているライブラリを使ってみることにしました。 調べてみたところ、JavaScript製の CASL が CASL React を使うことで、 React (Next.js) に対応できそう TypeScriptで書かれている リポジトリの README に Heavily insp
Full-stack Rust: A complete tutorial with examples - LogRocket Blog
We also define some helpers to create our data objects for the API from the database domain objects. This is all we’ll put in the common project. Let’s continue with the backend part of our app. Building the REST backend We start off with the database definition for our data model: CREATE TABLE IF NOT EXISTS owner ( id SERIAL PRIMARY KEY NOT NULL, name VARCHAR(255) NOT NULL ); CREATE TABLE IF NOT
An AI-native software engineer is one who deeply integrates AI into their daily workflow, treating it as a partner to amplify their abilities. This requires a fundamental mindset shift. Instead of thinking “AI might replace me” an AI-native engineer asks for every task: “Could AI help me do this faster, better, or differently?”. The mindset is optimistic and proactive - you see AI as a multiplier
Prioritizing performance when building our web apps improves the user experience and helps ensure they can be used by as many people as possible. In this article, Michelle Barker will walk you through some of the front-end optimization tips to keep our Vue apps as efficient as possible. Single Page Applications (SPAs) can provide a rich, interactive user experience when dealing with real-time, dyn
How We Built Hydrogen: A React Framework for Building Custom Storefronts - Shopify
How We Built Hydrogen: A React Framework for Building Custom StorefrontsWe’ve been building Hydrogen for more than a year. Here’s a look behind the scenes at how we did it, what we learned from making big bets, and what it was like building a new framework from the ground up on experimental technology. We’ve been building Hydrogen, a React framework for building custom storefronts on Shopify, for
アクセシブルなフロントエンド開発のこれまでとこれから
アクセシブルなフロントエンド開発のこれまでとこれから 2021年11月27日に開催された JS ConfJP 2021 にて登壇してきました。このページはそこで登壇した内容をもとに書き起こした記事です。 アクセシビリティとは何か フロントエンド開発をしている人であれば「アクセシビリティ」という言葉は耳にしたことがあると思います。 では、アクセシビリティとは一体何を意味する言葉なのでしょう。 アクセシビリティはあらゆる人がアクセスできるようになることを指します。 アクセスする、というと想像しづらいのですが、なんらかの情報を得られるようになる、とある機器やサービスを利用できるようになると言い換えるとイメージしやすいかもしれません。 では「ウェブアクセシビリティ」とは何でしょうか。 外務省の定義として 「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームペー
In 2022, large language models (LLMs) finally got good. Specifically, Google and OpenAI have led the way in creating foundation models that respond to instructions more usefully. For OpenAI, this came in the form of Instruct-GPT (OpenAI blogpost), while for Google this was reflected in their FLAN training method (Wei et al. 2022, arxiv). Flan’s which beat the Hypermind forecast for MMLU performanc
This post introduces the concept of durable execution, which is used by Stripe, Netflix, Coinbase, HashiCorp, and many others to solve a wide range of problems in distributed systems. Then it shows how simple it is to write durable code using Temporal's TypeScript/JavaScript SDK. For an updated version of this post, see durable-execution.pdf Distributed systems# When building a request-response mo
Storybook 6.4
Storybook is the leading UI development workshop for components and pages. Over the past five years, it's grown from niche tool to standard fixture in frontend that's used by teams at Twitter, Github, BBC, and the New York Times. As Storybook's user base has grown, so have its use cases. Early adopters used Storybook to develop components for design systems and libraries. Now, teams use it to buil
RegionalRubyKaigi レポート (88) 東京 Ruby 会議 12 東京 Ruby 会議 12 実行委員長のおしょうゆです。 素敵なレポートを参加者のみなさまに執筆いただきました。ぜひお読みください。 日時：2025 年 1 月 18 日 会場：横浜市鶴見区民文化センター サルビアホール 主催：東京 Ruby 会議 12 実行委員会 後援・会計協力：一般社団法人 日本 Ruby の会 公式サイト：https://regional.rubykaigi.org/tokyo12/ 公式タグ：#tokyorubykaigi (おしょうゆ) 2016 年の東京 Ruby 会議 11 から 9 年、東京 Ruby 会議が帰ってきました。おかえりなさい。始動させたのはオーガナイザーのおしょうゆさん、それからコアメンバーの皆さんです。今回は神奈川県は横浜市鶴見区、まあ大体東京に収まる範囲の
HTMLRewriter
No results found. Try a different search term, or use our global search. Overview Getting started CLI Dashboard Prompting Templates Examples Tutorials Demos and architectures Development & testing Overview Environment variables and secrets Vite Plugin ↗ Choosing between Wrangler & Vite Developing with multiple Workers Adding local data Supported bindings per development mode Testing ↗ Playground C
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Prompt Engineering Playbook for Programmers
2023年版！エンジニア必見のチートシート集 - Qiita
Your URL Is Your State
Mastraのサンプル集を一気に紹介する｜yoshi8
なぜSerenaからLaravel Boostに変えるとAIの精度が上がるのか
Release v11.0.0 · vercel/next.js
Connect for Node.js is now available
今更ながらNext.jsに入門した - maru source
LLM Powered Autonomous Agents
入門者でも安心、Playwrightで驚くほど簡単にブラウザテストを行う | アールエフェクト
The State of React and the Community in 2025
出来る限り短く説明する React 19 のサンプルコード10選
Introducing RSC Explorer — overreacted
Vite 8 Beta: The Rolldown-powered Vite
Top Front-End Tools Of 2023 — Smashing Magazine
Next.jsのテンプレートリポジトリをつくろう
How Functional Programming Shaped (and Twisted) Frontend Development
One Year with Next.js App Router — Why We're Moving On
Next.js に CASL React を組み込んで権限管理をしてみた - メモ的な思考的な
The AI-Native Software Engineer
Optimizing A Vue App — Smashing Magazine
The Near Future of AI is Action-Driven
Building Distributed Systems in Node
RegionalRubyKaigi レポート (88) 東京 Ruby 会議 12