メニュー
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill next-js-frameworkコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns
Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring
SOC 職業分類に基づく
SKILL.md を表示中
| name | next-js-framework |
| description | Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime |
| sasmp_version | 2.0.0 |
| bonded_agent | 01-react-fundamentals |
| bond_type | SECONDARY_BOND |
| input_validation | {"required_packages":[{"next":">=14.0.0"},{"react":">=18.0.0"}]} |
| output_format | {"code_examples":"tsx","test_template":"jest"} |
| error_handling | {"patterns":["error_boundary","not_found","loading_states"]} |
| observability | {"logging":"next_telemetry","metrics":["build_time","fcp","lcp"]} |
Master Next.js for building production-ready React applications with server-side rendering, static site generation, and API routes.
npx create-next-app@latest my-app
cd my-app
npm run dev
pages/
├── index.js → /
├── about.js → /about
├── blog/
│ ├── index.js → /blog
│ └── [slug].js → /blog/:slug
└── api/
└── hello.js → /api/hello
// pages/blog/[slug].js
import { useRouter } from 'next/router';
export default function BlogPost() {
const router = useRouter();
const { slug } = router.query;
return <div>Post: {slug}</div>;
}
// pages/blog/[slug].js
export async function getStaticProps({ params }) {
const post = await fetchPost(params.slug);
return {
props: { post },
revalidate: 60
};
}
() {
posts = ();
{
: posts.( ({ : { : post. } })),
:
};
}
() {
;
}
// pages/profile.js
export async function getServerSideProps(context) {
const { req, res, params, query } = context;
const user = await fetchUser(query.id);
if (!user) {
return {
redirect: {
destination: '/404',
permanent: false
}
};
}
return {
props: { user }
};
}
export default function Profile({ user }) {
return <div>{user.name}</div>;
}
import useSWR from 'swr';
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher);
if (error) return <div>Failed to load</div>;
if (isLoading) return <div>Loading...</div>;
return <div>Hello {data.name}!</div>;
}
// pages/api/users.js
export default async function handler(req, res) {
if (req.method === 'GET') {
const users = await fetchUsers();
res.status(200).json(users);
} else if (req.method === 'POST') {
const newUser = await createUser(req.body);
res.status(201).json(newUser);
} else {
res.status(405).json({ error: 'Method not allowed' });
}
}
// pages/api/users/[id].js
export default async function handler(req, res) {
const { id } = req.query;
const user = await fetchUser(id);
res.status(200).json(user);
}
import Image from 'next/image';
function Avatar() {
return (
<Image
src="/profile.jpg"
alt="Profile"
width={200}
height={200}
priority // Load immediately for LCP
/>
);
}
// External images
<Image
src="https://example.com/image.jpg"
alt="External"
width={500}
height={300}
loader={({ src, width }) => `${src}?w=${width}`}
/>
// pages/_app.js
import Layout from '../components/Layout';
export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
// pages/dashboard.js
import DashboardLayout from '../components/DashboardLayout';
export default function Dashboard() {
return <div>Dashboard content</div>;
}
Dashboard.getLayout = function getLayout(page) {
return <DashboardLayout>{page}</DashboardLayout>;
};
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
const getLayout = Component.getLayout || ((page) => page);
return getLayout(<Component {...pageProps} />);
}
import Head from 'next/head';
export default function Page() {
return (
<>
<Head>
<title>Page Title</title>
<meta name="description" content="Page description" />
<meta property="og:title" content="OG Title" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>Content</div>
</>
);
}
// middleware.js
import { NextResponse } from 'next/server';
export function middleware(request) {
const { pathname } = request.nextUrl;
// Redirect if not authenticated
if (pathname.startsWith('/dashboard') && !request.cookies.get('token')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: '/dashboard/:path*'
};
# .env.local
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com
// Server-side only
const dbUrl = process.env.DATABASE_URL;
// Client-side accessible (NEXT_PUBLIC_ prefix)
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
npm install -g vercel
vercel
npm run build
npm start
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
CMD ["npm", "start"]
Difficulty: Intermediate to Advanced Estimated Time: 3-4 weeks Prerequisites: React, Node.js Basics