サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
nextjs.org
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
Next.js 14.2 includes development, production, and caching improvements. Turbopack for Development (Release Candidate): 99.8% tests passing for next dev --turbo. Build and Production Improvements: Reduced build memory usage and CSS optimizations. Caching Improvements: Configurable invalidation periods with staleTimes. Error DX Improvements: Better hydration mismatch errors and design updates. Upgr
module.exports = { cacheHandler: require.resolve('./cache-handler.js'), cacheMaxMemorySize: 0, // disable default in-memory caching }; Using this configuration when self-hosting is important when using container orchestration platforms like Kubernetes, where each pod will have a copy of the cache. Using a custom cache handler will allow you to ensure consistency across all pods hosting your Next.j
Edge Runtime In Next.js, the lightweight Edge Runtime is a subset of available Node.js APIs. The Edge Runtime is ideal if you need to deliver dynamic, personalized content at low latency with small, simple functions. The Edge Runtime's speed comes from its minimal use of resources, but that can be limiting in many scenarios. For example, code executed in the Edge Runtime on Vercel cannot exceed be
{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } Then, run npm run build to build your application. Finally, run npm run start to start the Node.js server. This server supports all Next.js features. Docker Image Next.js can be deployed to any hosting provider that supports Docker containers. You can use this approach when deploying to container orchestrators such
As we announced at Next.js Conf, Next.js 14 is our most focused release with: Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms Partial Prerendering (Preview): Fast initial
Back to BlogMonday, October 23rd 2023 How to Think About Security in Next.jsPosted by React Server Components (RSC) in App Router is a novel paradigm that eliminates much of the redundancy and potential risks linked with conventional methods. Given the newness, developers and subsequently security teams may find it challenging to align their existing security protocols with this model. This docume
Server and Client Composition PatternsWhen building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components. When to use Server and Client Components? Here's a quick summary of the different use cases for Server and Client Components:
Back to BlogTuesday, September 19th 2023 Next.js 13.5Posted by Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Refresh): For faster iterations when saving changes 40% less memory usage: Measured when running next start Optimized Package Imports: Faster updates when using popular icon
import { registerOTel } from '@vercel/otel' export function register() { registerOTel('next-app') } See the Next.js with OpenTelemetry example for a complete implementation. Good to know This feature is experimental. To use it, you must explicitly opt in by defining experimental.instrumentationHook = true; in your next.config.js. The instrumentation file should be in the root of your project and n
Caching in Next.jsNext.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. Good to know: This page helps you understand how Next.js works under the hood but is not essential knowledge to be productive
Back to BlogThursday, June 22nd 2023 Next.js App Router UpdatePosted by The App Router represents a new foundation for the future of Next.js, but we recognize there are opportunities to make the experience better. We'd like to give an update on what our current priorities are. For the upcoming releases of Next.js, we are focusing on the following areas: Improving Performance Improving Stability Im
OpenTelemetry Good to know: This feature is experimental, you need to explicitly opt-in by providing experimental.instrumentationHook = true; in your next.config.js. Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app. As applications become more complex, it becomes increasingly difficult to identify and diagnose issues that may arise. By leve
Server Actions and MutationsServer Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications. 🎥 Watch: Learn more about forms and mutations with Server Actions → YouTube (10 minutes). Convention A Server Action can be defined with the React "use server" directive. You c
Next.js 13.4 is a foundational release, marking stability for the App Router: App Router (Stable): React Server Components Nested Routes & Layouts Simplified Data Fetching Streaming & Suspense Built-in SEO Support Turbopack (Beta): Your local dev server, faster and with improved stability Server Actions (Alpha): Mutate data on the server with zero client JavaScript Since the release of Next.js 13
Routing FundamentalsThe skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js. Terminology First, you will see these terms being used throughout the documentation. Here's a quick reference: Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent an
usePathnameusePathname is a Client Component hook that lets you read the current URL's pathname. 'use client' import { usePathname } from 'next/navigation' export default function ExampleClientComponent() { const pathname = usePathname() return <p>Current pathname: {pathname}</p> } usePathname intentionally requires using a Client Component. It's important to note Client Components are not a de-op
Intercepting RoutesIntercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context. For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js inte
Next.js 13.3 adds popular community-requested features, including: File-Based Metadata API: Dynamically generate sitemaps, robots, favicons, and more. Dynamic Open Graph Images: Generate OG images using JSX, HTML, and CSS. Static Export for App Router: Static / Single-Page Application (SPA) support for Server Components. Parallel Routes and Interception: Advanced routing features for the App Route
App RouterThe Next.js App Router introduces a new model for building applications using React's latest features such as Server Components, Streaming with Suspense, and Server Actions. Get started with the App Router by creating your first page. Frequently Asked Questions How can I access the request object in a layout? You intentionally cannot access the raw request object. However, you can access
Back to BlogThursday, February 23rd 2023 Next.js 13.2Posted by Next.js 13.2 includes major improvements to the App Router (app) in preparation for stability: Built-in SEO Support: New Metadata API to set static and dynamic meta tags. Route Handlers: Custom request handlers, built on Web Request and Response. MDX for Server Components: Use React components inside Markdown, server-side only. Rust MD
export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} Route Handlers can be nested inside the app directory, similar to page.js and layout.js. But there cannot be a route.js file at the same route segment level as page.js. Supported HTTP Methods The following HTTP methods are supported: GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS. If an unsu
Back to BlogThursday, December 22nd 2022 Next.js 13.1Posted by Next.js 13.1 includes improvements to both the pages/ (stable) and app/ (beta) directories: app Directory (Beta) Improvements: Improved reliability and performance. Built-in Module Transpilation: Bringing next-transpile-modules capabilities into core. Edge Runtime (Stable): A light Node.js runtime for the Edge. Turbopack Updates: Suppo
RenderingRendering converts the code you write into user interfaces. React and Next.js allow you to create hybrid web applications where parts of your code can be rendered on the server or the client. This section will help you understand the differences between these rendering environments, strategies, and runtimes. Fundamentals To start, it's helpful to be familiar with three foundational web co
Good to know: You may need to restart the ESLint server in VS Code for the ESLint changes to take effect. Open the Command Palette (cmd+shift+p on Mac; ctrl+shift+p on Windows) and search for ESLint: Restart ESLint Server. Next Steps After you've updated, see the following sections for next steps: Upgrade new features: A guide to help you upgrade to new features such as the improved Image and Link
As we announced at Next.js Conf, Next.js 13 (stable) lays the foundations to be dynamic without limits: app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
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
Production ChecklistBefore taking your Next.js application to production, there are some optimizations and patterns you should consider implementing for the best user experience, performance, and security. This page provides best practices that you can use as a reference when building your application, before going to production, and after deployment - as well as the automatic Next.js optimization
We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements
次のページ
このページを最初にブックマークしてみませんか?
『Next.js by Vercel - The React Framework』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く