はてなブックマーク

Next.js 15.5 includes Turbopack builds in beta, stable Node.js middleware, TypeScript improvements, next lint deprecation, and deprecation warnings for Next.js 16. Highlights for this release include: Turbopack Builds (beta): Production turbopack builds (next build --turbopack) now in beta Node.js Middleware (stable): Node.js runtime support for middleware is now stable TypeScript Improvements: Ty

Next.js 15.4 includes updates to performance, stability, and Turbopack compatibility. Highlights for this release include: Turbopack Builds: 100% integration test compatibility for next build --turbopack Stability Improvements: Numerous stability and performance improvements to Next.js and Turbopack This blog post also includes an early preview of what's coming in Next.js 16, our next major releas

Next.js 15.3 includes Turbopack for builds, new client instrumentation and navigation hooks, and more: Turbopack for builds (alpha): Faster production builds passing 8000+ tests (99%) Community support for Rspack (experimental): Alternative bundler with Webpack compatibility Client Instrumentation hook: Early monitoring and analytics setup Navigation hooks: Control routing with onNavigate and useL

Next.js publishes new versions to the canary channel daily. These pre-release builds undergo extensive internal testing before being promoted to a stable release. While we encourage you to experiment with the latest features on canary, we do not recommend serving production traffic from these versions. Once a major version is released, it enters the long-term support (LTS) phase. We highly encoura

# Use the automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@latest react-dom@latest # ...or start a new project npx create-next-app@latest Redesigned error UI and improved stack traces We've added both visual and quality improvements to errors you may encounter while building your application. Let's walk through each area of improv

Single-Page Applications with Next.jsNext.js fully supports building Single-Page Applications (SPAs). This includes fast route transitions with prefetching, client-side data fetching, using browser APIs, integrating with third-party client libraries, creating static routes, and more. If you have an existing SPA, you can migrate to Next.js without large changes to your code. Next.js then allows you

Back to BlogFriday, January 3rd 2025 Composable Caching with Next.jsPosted by We’re working on a simple and powerful caching model for Next.js. In a previous post, we talked about our journey with caching and how we’ve arrived at the 'use cache' directive. This post will discuss the API design and benefits of 'use cache'. What is 'use cache'? 'use cache' makes your application faster by caching da

Next.js 15.1 brings core upgrades, new APIs, and improvements to the developer experience. Key updates include: React 19 (stable): Support for React 19 is officially available in both Pages Router & App Router. Improved Error Debugging: Enhanced DX and better source maps for the browser and the terminal. after (stable): New API to execute code after a response has finished streaming. forbidden / u

Back to BlogThursday, October 24th 2024 Our Journey with CachingPosted by Frontend performance can be hard to get right. Even in highly optimized apps, the most common culprit by far is client-server waterfalls. When introducing Next.js App Router, we knew we wanted to solve this issue. To do that, we needed to move client-server REST fetches to the server using React Server Components in a single

How to build micro-frontends using multi-zones and Next.js Examples With Zones Multi-Zones are an approach to micro-frontends that separate a large application on a domain into smaller Next.js applications that each serve a set of paths. This is useful when there are collections of pages unrelated to the other pages in the application. By moving those pages to a separate zone (i.e., a separate app

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

Next.js 15 is officially stable and ready for production. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. Try Next.js 15 today: # Use the new automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@rc react-dom@rc We're also excited to s

Following the announcement of the first Next.js 15 Release Candidate back in May, we’ve been preparing a second Release Candidate based on your feedback. Here’s what we’ve been working on: @next/codemod upgrade: Easily upgrade to the latest Next.js and React versions. Turbopack for development: Performance improvements and Next.js 15 stability target. Async Request APIs (Breaking): Incremental ste

How to implement authentication in Next.jsUnderstanding authentication is crucial for protecting your application's data. This page will guide you through what React and Next.js features to use to implement auth. Before starting, it helps to break down the process into three concepts: Authentication: Verifies if the user is who they say they are. It requires the user to prove their identity with s

How to build a Progressive Web Application (PWA) with Next.jsProgressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you

Form ComponentThe <Form> component extends the HTML <form> element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It's useful for forms that update URL search params as it reduces the boilerplate code needed to achieve the above. Basic usage: import Form from 'next/form' export default function Page() { return ( <Form action="/search"> {/*

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

How to create a static export of your Next.js application Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. When running next build, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, r

Linking and NavigatingIn Next.js, routes are rendered on the server by default. This often means the client has to wait for a server response before a new route can be shown. Next.js comes with built-in prefetching, streaming, and client-side transitions ensuring navigation stays fast and responsive. This guide explains how navigation works in Next.js and how you can optimize it for dynamic routes

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

How to preview content with Draft Mode in Next.jsDraft Mode allows you to preview draft content from your headless CMS in your Next.js application. This is useful for static pages that are generated at build time as it allows you to switch to dynamic rendering and see the draft changes without having to rebuild your entire site. This page walks through how to enable and use Draft Mode. Step 1: Cre

Welcome to the Next.js Foundations course! In this free interactive course, you'll learn the main features of Next.js by building a full-stack web application. What we'll be building For this course, we'll build a financial dashboard that has: A public home page. A login page. Dashboard pages that are protected by authentication. The ability for users to add, edit, and delete invoices. The dashboa

Node.js server Next.js can be deployed to any provider that supports Node.js. Ensure your package.json has the "build" and "start" scripts: Then, run npm run build to build your application and npm run start to start the Node.js server. This server supports all Next.js features. If needed, you can also eject to a custom server. Node.js deployments support all Next.js features. Learn how to configu

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

middleware.jsThe middleware.js|ts file is used to write Middleware and run code on the server before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly. Middleware executes before routes are rendered. It's particularly useful for implementing custom server-side logic l

opengraph-image and twitter-imageThe opengraph-image and twitter-image file conventions allow you to set Open Graph and Twitter images for a route segment. They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site. There are two ways to set Open Graph and Twitter images: Using image files (.jpg, .png, .gif) Using code to generat