-
|
Next.js 13 introduces the This discussion is where you can provide feedback on the new conventions and features around layouts, server components, streaming, and more. If you have feedback on Turbopack, please use this discussion. |
Beta Was this translation helpful? Give feedback.
Replies: 831 comments 1785 replies
-
|
For me, the one big remaining question is how to handle form POSTs in this new structure. My company has interaction with the server built around progressively enhanced form handling (currently using next-runtime to get a more Remix-like experience), and this is one of the things I was hoping would be front and center, but so far it seems to be conspicuously missing. |
Beta Was this translation helpful? Give feedback.
-
|
Looking forward to this! Ideally, we could define mutations on the server and we can import them just like that on the client side and it works with typing and everything. Maybe something like https://github.com/Janpot/next-rpc would be awesome. |
Beta Was this translation helpful? Give feedback.
-
|
I think the ideal here would really be to have mutations and manually-triggered revalidations fundamentally use form POST/GET (as appropriate), so that you can have a page that works fine even with JS disabled. This would mean adding some handling around, e.g. form values being limited to strings, but I don't think that's really a hard blocker on anything. The need to route everything through client-side JS handling is IMO the biggest weakness with Next pre-13.x, and it would seem like a huge missed opportunity to me to not correct that with all the other emphasis on server-side handling. |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens I guess we are all excited to learn how the improved mutations and forms handle guidance will look (any teasers? ;)) I found using the RPC approach here quite promising. Both Server Components and Client Components using RPC have the same coding style when server-side functions can be just used directly inside React components. Let me share a quick example and a post to articulate the idea. Curious what you all think |
Beta Was this translation helpful? Give feedback.
-
|
Mutations are the biggest question left unanswered by the new app directory for me. For an app, as opposed to a what some would call a "standard website", mutating data is as important, if not more so, than fetching it. The temporary workaround in the documentation feels sketchy. Moreover, the "beta" status is causing major API libraries (such as TRPC and Apollo GraphQL) to not attempt definitive implementations for fear of breaking changes. I don't mean to sound demanding, but I strongly believe that implementing mutations in an effective manner should be a top priority. |
Beta Was this translation helpful? Give feedback.
-
|
I agree, literally bumped into needing do handle form data submissions, saw that mutations is still WIP. Very ampt for that to be sorted. |
Beta Was this translation helpful? Give feedback.
-
|
RE: On-demand Revalidation, there's a call out in Data Fetching > Revalidating Data, but it doesn't seem to appear listed elsewhere (nor on Roadmap). It'd be great to understand the plan for On-demand Revalidation on the Many thanks! |
Beta Was this translation helpful? Give feedback.
-
|
This might help explain the rendering equivalents a bit: https://beta.nextjs.org/docs/rendering/fundamentals Right now on-demand revalidation already works, if the page uses In the future this will be expanded to be more granular than per-page deciding static rendering or dynamic rendering. |
Beta Was this translation helpful? Give feedback.
-
|
I don't understand. |
Beta Was this translation helpful? Give feedback.
-
|
I've also used a bit of Route Segment Config Options. It lets you configure behavior in layouts or pages by exporting the variables settings to your needs. |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to see what's causing a page to server render as opposed to static render? I've tried using |
Beta Was this translation helpful? Give feedback.
-
|
I have noticed that when working with layouts everything gets wrapped with a |
Beta Was this translation helpful? Give feedback.
-
|
I had the same problem when I used React Three Fiber. I use Canvas for the parent layout, and I add CSS "displays: contents" too. I got the error "Error: R3F: Link is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively" I don't understand why we had "Link" in here. Is it because of the nested layout or not |
Beta Was this translation helpful? Give feedback.
-
|
It seems undesirable for the framework to generate div tags at will. The reason is that you can't know the side effects unless you search. I didn't have a good solution because I didn't have enough knowledge. I'm sorry to point it out. 😢 |
Beta Was this translation helpful? Give feedback.
-
|
Have anybody found a way to manually prevent scroll when using router? Having exactly same issue with toggling checkboxes as mentioned above. |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, you'll be pleased to hear the |
Beta Was this translation helpful? Give feedback.
-
|
I just love its awesome. |
Beta Was this translation helpful? Give feedback.
-
|
Even if react StrictMode is turned off, useEffect is run 2 times in new app directory. |
Beta Was this translation helpful? Give feedback.
-
|
Opened a PR here: #41894 Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @timneutkens ! |
Beta Was this translation helpful? Give feedback.
-
|
It's a dev only hint that maybe something is wrong. ;) |
Beta Was this translation helpful? Give feedback.
-
Yes, but it should only work when StrictMode is turned on. StrictMode docs here Your feedback is welcome, but I would advise against using emoticons in these scenarios, as they can be misinterpreted. |
Beta Was this translation helpful? Give feedback.
-
|
Attempting to use css modules in client components and the class names are applied but the css is not created, I am assuming (hoping) this is a bug. |
Beta Was this translation helpful? Give feedback.
-
|
Definitely running into the same issue here, and since Turbopack does not support SCSS at this time it's not a viable option if your modules aren't using plain ol' CSS |
Beta Was this translation helpful? Give feedback.
-
|
As of |
Beta Was this translation helpful? Give feedback.
-
|
using version 13.1.0 this is not just working. I simply followed the installation steps from the guide, and no styles are loaded in client, exactly as @made-by-jonny exaplained |
Beta Was this translation helpful? Give feedback.
-
|
It does work with Turbopack, not sure what the implications are. I guess it's not using proper CSS modules, but it's def. applying some scoping mechanism, generating classnames such as |
Beta Was this translation helpful? Give feedback.
-
|
It has been fixed with the latest version of next. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
You no longer have to use next-transpile-modules, there's a built-in option: https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages |
Beta Was this translation helpful? Give feedback.
-
|
Is this expected to work with CSS Modules (file.module.css) as well? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah it should, are you seeing something else? |
Beta Was this translation helpful? Give feedback.
-
|
When using CSS Modules with transpilePackages I'm seeing similar errors as described in #41856 (comment). |
Beta Was this translation helpful? Give feedback.
-
|
What was the reason to switch from If that's the case, I find it's really ugly to have a bunch of folders with just a |
Beta Was this translation helpful? Give feedback.
-
|
+1 to customizing file names. |
Beta Was this translation helpful? Give feedback.
-
|
@AndrewOttavianoAbb It's never gonna' happen. We still talking about this? I think I'm gonna have to abandon this thread because it's just become the same repetitive complaints that have been answered 1,000 times. It was nice to have this while it lasted. I would appreciate it if Vercel centralized all this into a referable blog so these threads that contain all the information don't get ruined and buried by random comments. Might be good to lock this at this point. |
Beta Was this translation helpful? Give feedback.
-
|
Naming is nice and clear, intuitive and understandable. I see no reason to change it or make customisable. Customisation bring a chaos among projects. Nextjs is a framework, frameworks have a lot of fixed stuff to make your work more easier. |
Beta Was this translation helpful? Give feedback.
-
|
I actually don't like the everything in everything else should be imported from outside the pages folder 👍🏻 That the nextjs team encourage putting everthing in the |
Beta Was this translation helpful? Give feedback.
-
ready - started server on 0.0.0.0:3000, url: http://localhost:3000 event - compiled client and server successfully in 1472 ms (267 modules) http://localhost:3000/ browser stuck at loading |
Beta Was this translation helpful? Give feedback.
-
|
To keep focus on the other question thread specific to that question, I'm making a new comment for another question... If "Root Layout" is required and has |
Beta Was this translation helpful? Give feedback.
-
|
I think I experienced the same with lastpass extension in my browser. It auto adds an element when you have an input. I just have a normal form with label and input in it. I don't have an issue when I turn off the extension. |
Beta Was this translation helpful? Give feedback.
-
|
I got a bug report for Emotion recently that showcased to me how a Remix app gets broken with somebody's web extension. The root cause behind this that I've diagnosed is the same thing that is being discussed here - rehydrating the whole I'm not exactly sure what the real extension was trying to do. I only got a minimal repro that had this in the extension:
Perhaps the issue reporters could shed some more light on what they are trying to achieve there to get some advice here. cc @flappyBug @lucascurti While I agree that a lot of things can break the reconciliation - a custom container used as root was always a good enough boundary that allowed 3rd party things to work most of the time. I'm also a little bit confused when it comes to useServerInsertedHTML. Things inserted when rendering the shell~ are inserted into |
Beta Was this translation helpful? Give feedback.
-
|
The original issue @Andarist mentioned is here. I got report that some browser extension breaks our site style, including Urban VPN Proxy. I reviewed the compiled extension code, and reproduced a minimal extension to make this happen. The key point is that the extension injects new DOM element into the document in a content script runs at document_start Another fun fact is to break React 18's |
Beta Was this translation helpful? Give feedback.
-
|
Just got another hydration warning related to this when investigating another reported issue:
This one doesn't blow the SSRed content as far as I can tell - but it's still super annoying. Both Loom and Grammarly are super popular extensions |
Beta Was this translation helpful? Give feedback.
-
|
@sebmarkbage @timneutkens Wondering if the official position on this has changed at all? |
Beta Was this translation helpful? Give feedback.
-
|
I can't wait for API Routes support in the |
Beta Was this translation helpful? Give feedback.
-
|
In think, it would be great to include a suffix like |
Beta Was this translation helpful? Give feedback.
-
|
API Routes are now supported in the
|
Beta Was this translation helpful? Give feedback.
-
|
How to get body in POST and PUT handlers? |
Beta Was this translation helpful? Give feedback.
-
export async function POST(request: NextRequest) {
const body = await request.json();Check out some examples here: |
Beta Was this translation helpful? Give feedback.
-
|
thank you @karlhorky |
Beta Was this translation helpful? Give feedback.
-
|
I am currently testing some stuff out in the take a look at screenshots folder struct app/layout.tsx code app/page.tsx code app/account/page.tsx code app/movie/page.tsx code
|
Beta Was this translation helpful? Give feedback.
-
|
the first div should be replacing #__next I assume, but since there is no ID to target, it might inject multiple more? |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
You can read the reply here: #41745 (reply in thread) goal is to remove it but we can't do that yet 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Quick update: the |
Beta Was this translation helpful? Give feedback.
-
|
After little bit of trying,
|
Beta Was this translation helpful? Give feedback.
-
|
I'm running into the same problem, but the workaround @IhsenBouallegue suggested solved the issue for me. |
Beta Was this translation helpful? Give feedback.
-
Could you elaborate on how to exactly include localized text context with that approach or direct me to a resource? |
Beta Was this translation helpful? Give feedback.
-
For anyone getting this error just for using client components: Updating to 13.0.2 worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
I'm also not sure how we can handle i18n stuff without a lang segment in the url. domain.com > en website Is it my part to check if the locale matched with on of my sites and if not it's the root / default site? |
Beta Was this translation helpful? Give feedback.
-
I have been unsuccessful in getting middleware to load in nextjs 13.0.5 with turbopack, I only found this: https://stackoverflow.com/questions/74614404/middleware-in-next-js13-with-turbopack ... does anyone have any tips? |
Beta Was this translation helpful? Give feedback.
-
|
I use |
Beta Was this translation helpful? Give feedback.
-
|
i'm having this same issue while trying to deploy to vercel... |
Beta Was this translation helpful? Give feedback.
-
|
@mike14747 , as you described, is it possible to use useSession() and getServerSession() in app/dashboard/users |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, you will be able to use useSession() in client components and getServerSession() in server components. Example of client component usage (my Authbar component): 'use client';
import Link from 'next/link';
import { signOut, useSession } from 'next-auth/react';
import Button from '../components/Button';
import styles from '../../styles/Authbar.module.css';
export default function Authbar() {
const { data: session, status } = useSession();
const loading = status === 'loading';
return (
<section className={styles.authbarContainer}>
{loading && <>Loading...</>}
{!session && !loading &&
<p>
<Link href="/login?callbackUrl=/">
Login
</Link>
<span> / </span>
<Link href={'/register'}>
Register
</Link>
</p>
}
{session?.user &&
<>
<span className={styles.username}>
<>User: </>
<Link href="/profile">
{session.user.name}
</Link>
</span>
<Button onClick={() => signOut({ callbackUrl: '/' })} size="small" variant="text">Logout</Button>
</>
}
</section>
);
} |
Beta Was this translation helpful? Give feedback.
-
If I wrap up |
Beta Was this translation helpful? Give feedback.
-
|
@devHybrid0306 // /middleware.ts
import { NextResponse, NextMiddleware } from 'next/server';
import { SessionFactory } from './app/middleware/session-factory.ts';
import { AuthPageGuard } from './app/middleware/auth-page-guard';
import { foldLeft } from './utils/function.utils';
const factories = [
SessionFactory,
AuthPageGuard,
];
const base: NextMiddleware = () => NextResponse.next();
export const middleware = foldLeft(
(factory, accumulation) => factory(accumulation),
base,
factories
);// /app/middleware/middleware-factory.ts
import { NextMiddleware } from 'next/server';
export type MiddlewareFactory = (middleware: NextMiddleware) => NextMiddleware;// /app/middleware/session-factory.ts
import { NextMiddleware, NextResponse } from 'next/server';
import { v4 } from 'uuid';
import { expiration, SESSION_ID } from '../../utils/cookie.utils';
import { routes } from '../../utils/route.utils';
import { MiddlewareFactory } from './middleware-factory';
// creates session and adds session id to inbound request cookies if one doesn't already exist
// stores session id as cookie on response if it doesn't already exist
export const SessionFactory: MiddlewareFactory = (next: NextMiddleware) => {
const middleware: NextMiddleware = async (request, event) => {
const secure = request.nextUrl.protocol.startsWith('https');
const path = request.nextUrl.pathname;
const match = routes.pages.patterns.some(pattern => pattern.test(path));
if (!match) {
return next(request, event);
}
const cookie = request.cookies.get(SESSION_ID);
const sessionId = cookie ? cookie.value : v4();
if (!cookie) {
request.cookies.set(SESSION_ID, sessionId);
}
const result = await next(request, event);
if (!cookie && result instanceof NextResponse) {
result.cookies.set({
name: SESSION_ID,
value: sessionId,
expires: expiration('years', 1),
secure,
});
}
return result;
};
return middleware;
}// /app/middleware/auth-guard.ts
import { NextMiddleware, NextResponse } from 'next/server';
import { routes } from '../../utils/route.utils';
import { MiddlewareFactory } from './middleware-factory';
/**
* request to /login or /register which already has an access-token is redirected to home page
*/
export const AuthPageGuard: MiddlewareFactory = (next: NextMiddleware) => {
const patterns = [
routes.auth.register.pattern,
routes.auth.login.pattern,
];
const middleware: NextMiddleware = (request, event) => {
const path = request.nextUrl.pathname;
const match = patterns.some(pattern => pattern.test(path));
if (match && request.cookies.has('access-token')) {
const parts = path.split('/');
const locale = parts[1];
const base = process.env.NEXT_PUBLIC_APP_BASE_URL;
const url = routes.home.url(locale);
const location = `${base}${url}`;
return NextResponse.redirect(location, 303);
}
return next(request, event);
}
return middleware;
}// /utils/function.utils.ts
export function foldLeft<I, A>(folder: (item: I, accumulation: A) => A, accumulation: A, items: I[]): A {
if (items.length === 0) {
return accumulation;
}
const [item, ...rest] = items;
return foldLeft(folder, folder(item, accumulation), rest);
} |
Beta Was this translation helpful? Give feedback.
-
|
I found a problem with CSS Modules, when I move
|
Beta Was this translation helpful? Give feedback.
-
|
When I enable Turbopack ( |
Beta Was this translation helpful? Give feedback.
-
|
For me it only works on |
Beta Was this translation helpful? Give feedback.
-
|
This should be fixed on the latest stable version, can you check that? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Creating a page at route |
Beta Was this translation helpful? Give feedback.
-
|
Tracking this here: #42010, thanks for reporting! |
Beta Was this translation helpful? Give feedback.
-
|
Hello, just tried to upgrade to next13 and turbopack on a project of mine (typescript, MUI) and I get this error:
I don't have any reference of |
Beta Was this translation helpful? Give feedback.
-
|
Please head to vercel/turborepo#2312 with this feedback. Attaching a minimal reproduction repository with your post would be tremendously helpful for the team working kn Turbopack! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone tell me, or better yet provide an example, on how to have a Client Component (user input, check box, radio button) and pass that information to a Server Component that calls an API. I have a component that has an input field that a user can use to search for employees. I have a Server Component that uses Fetch that returns the output and displays that output. (currently all employees since the User Input doesn't control it). What I can't figure out is how do I get the User's Input (Client Component Input) to the Server Component so it's interactive? This is using the new APP directory. |
Beta Was this translation helpful? Give feedback.
-
|
This is odd. My post have all the <. input. .> fields removed. |
Beta Was this translation helpful? Give feedback.
-
|
If you have a GitHub repo I can take a look. |
Beta Was this translation helpful? Give feedback.
-
|
I don't. New to all this. I follow what you are telling me. I think I tried it but I'm not sure. Will know tomorrow when I log in and try it. Take a look at this page: https://stackoverflow.com/questions/76130675/react-with-nextjs-and-search-bar/76132882#76132882 I've changed HEADER since this post but I believe search-results/page.js hasn't change. I even think search-text/page.js is pretty much the same but maybe without the PROPS. I was trying different combinations trying to get something to work. |
Beta Was this translation helpful? Give feedback.
-
|
I added SearchResults into SearchText and it just runs SearchResults fetching the API over and over and over. I have to remove SearchResults from SearchText to get it to stop. But then there's no results. I can attach the code if someone would like to look at it. |
Beta Was this translation helpful? Give feedback.
-
|
Found the issue. It would appear you can't have ASYNC as part of the function if the parent is a Client Component. export default async function SearchResults( {query} ) { So, what's the work around for resolving this? |
Beta Was this translation helpful? Give feedback.
-
|
I am trying to build a SPA using app directory but got a lot of warning when building, is there a way to suppress them? |
Beta Was this translation helpful? Give feedback.
-
|
Make sure to add a |
Beta Was this translation helpful? Give feedback.
-
|
So I am using export async function generateMetadata({
params,
}: {
params: { category: string }
}): Promise<Metadata> {
const category = await getCategoryBySlug(params.category)
if (!category) {
notFound()
}
return {
title: `${category.title}`,
description: `${category.excerpt}`,
openGraph: {
title: `${category.title}`,
description: `${category.excerpt}`,
},
}
}and once in the actual const category = await getCategoryBySlug(params.category)
if (!category) {
notFound()
}What I found interesting is that the However, if I comment that out and allow it to get to the |
Beta Was this translation helpful? Give feedback.
-
|
it doesn’t make sense to call notFound() in generateMetadata(). notFound() is meant to be used in a page handler to return 404 status code and not found content. Just return an empty object for the metadata so that none of the meta elements get set. |
Beta Was this translation helpful? Give feedback.
-
|
Ok so that solves one of my issues. However, now I am stuck with having a blank white screen with I used the example from the documentation: export default function NotFound() {
return (
<>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
</>
);
}And my browser console looks like this: |
Beta Was this translation helpful? Give feedback.
-
|
looks like it could be a bug in nextjs. Have you looked through the Issues (open and recently closed) to see if anyone else has reported it? |
Beta Was this translation helpful? Give feedback.
-
|
It randomly started working... I made no changes on my end (that I am aware of 😅 ) |
Beta Was this translation helpful? Give feedback.
-
|
I have a weird problem with fetch API and middleware. I am using the experimental app next.js with laravel. When I use the |
Beta Was this translation helpful? Give feedback.
-
|
Why is |
Beta Was this translation helpful? Give feedback.
-
|
With the App directory, how do you make the following combination from the pages directory work?
Now, with the RSC approach, is there an equivalent that does not require useSWR. I assume that the revalidation from the |
Beta Was this translation helpful? Give feedback.
-
|
I'm loading 3 Scripts inside the layout.tsx file. These scripts are only being loaded when the first page accessed is the main page. Whenever I hard refresh my site outside the main page the files don't get loaded. I'm using next |
Beta Was this translation helpful? Give feedback.
-
|
The problem seems to be in pages that were deopted into client-side rendering. |
Beta Was this translation helpful? Give feedback.
-
|
Overall I like the new structure. One thing I'd like to see is the ability to customize headers in SSR routes, not just API routes. For example, if there's a page that represents a sporting match and the scores are server-side rendered, I'd like to set the export async function getResponseHeaders(response) {
const matchStatus = await getMatchStatus();
response.set('cache-control', `public, s-maxage=${isInProgress ? 60 : 1800}`);
}
export default function MatchPage(props) {
// render the page here
} |
Beta Was this translation helpful? Give feedback.
-
|
I really wish the page handlers were designed to return a structure like: interface PageResponse {
component: JSX.Element;
status: number;
headers: HttpHeaders;
metadata: Metadata;
}
export default MyPage(props: Props): Promise<PageResponse> { … }that way it would allow for the handler to generate the component response + seo metadata within the same function (they often need the same data) along with http response headers and status code |
Beta Was this translation helpful? Give feedback.
-
|
I think this merits its own discussion as it's a loss of functionality from the current router. I've created a new discussion here. |
Beta Was this translation helpful? Give feedback.
-
|
I have some feedback on the File-Based Metadata API. I'm loving the conventions, but I ran into an issue with |
Beta Was this translation helpful? Give feedback.
-
|
Hi, mind sharing the reproduction to us? I can take a look for the deployment. Are you using your own build server? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @huozhi Not OP, but I also came across this today and was able to resolve it with @corneldm's suggestion. Repro is available here: https://github.com/sidmclaughlin/nextjs-favicon-repro. |
Beta Was this translation helpful? Give feedback.
-
|
See also #48962 for a corresponding bug report. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Anyone else running into an issue where a |
Beta Was this translation helpful? Give feedback.
-
|
The headers functions, |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/jherr/nextjs13-pokemon/blob/main/package.json#L18 Make sure you're using the very latest version of Next.js first, if it still happens let me know 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens yup, just verified in |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens this is the issue that seems directly related even though it's closed: #46356 |
Beta Was this translation helpful? Give feedback.
-
|
Just tested with |
Beta Was this translation helpful? Give feedback.
-
|
Update, if I downgrade to 13.2.0, it works. |
Beta Was this translation helpful? Give feedback.
-
|
Feedback on parallel + intercept routes I was able to get a basic version of a "either open in modal or separate page based on current route" interaction. Overall I'm glad that is now possible natively without super hacky code. I had some suggestions for improvements:
Thank you team! |
Beta Was this translation helpful? Give feedback.
-
|
Feedback + Question I'm currently using appDir with Mui and its So I can't use Metadata or generateMetadata because of the How can I change metadata in a component using |
Beta Was this translation helpful? Give feedback.
-
|
you don't generate metadata in client components.
to use mui components in your server rendered pages, you need a wrapper which is marked as 'use client' example // /about/page.tsx
export metadata: Metadata = {
canonical: 'https://whatever.com/about'
};
export default function AboutPage(): JSX.Element {
return (
<SomeContent />
);
}// some-content.tsx
'use client'
import { Typography } from '@mui/material';
export default function SomeContent(): JSX.Element {
return (
<Typography>stuff</Typography>
);
} |
Beta Was this translation helpful? Give feedback.
-
App Router StabilityHey folks, exciting news. The Next.js App Router is now stable! We couldn't have gotten without the literally thousands of replies in this discussion helping us uncover bugs, patch issues, and iterate on our design based on your feedback. We greatly appreciate it. Our focus for the coming weeks will be on fixing any additional bugs that come up during this new wave of feedback. Now that the router is stable, there are more additions we want to make, many based on the feedback shared here. To help make it easier to track feedback and upvote or discuss specific feature requests moving forward, we're going to close out this discussion. We've made a new section in Discussions specifically for the App Router where you can open new discussions and continue the conversation. Frequently Asked QuestionsThese are from the 13.4 blog post, but reposting here for clarity. What does App Router stability mean?Marking the App Router as stable today does not mean our work is done. Stability means that the core of the App Router is ready for production and has been validated by both our own internal testing, as well as many Next.js early adopters. There are still additional optimizations we'd like to make in the future, including Server Actions reaching full stability. It was important for us to push towards core stability to help provide clarity for the community on where they should begin learning and building applications today. The App Router is built on top of the React What does this mean for the Next.js beta docs?Starting today, we recommend building new applications with the App Router. The Next.js beta documentation, which has been used to explain the App Router and re-written from the ground up, is now merged back into the stable Next.js documentation. You can now easily toggle between the App or Pages Router. We recommend reading the App Router Incremental Adoption Guide to learn how to adopt the App Router. Is the pages directory going away?No, the pages directory is not going away. We are committed to supporting Using both Does this mean Server Components are "complete"?Next.js is one framework that is choosing the build on the React architecture, which includes Server Components. We hope that the experience provided with the App Router will encourage other frameworks (or new frameworks) to consider using this architecture, as well. There are still patterns yet to be defined in this ecosystem, like handling infinite scroll. For now, we recommend using client solutions for these patterns while the ecosystem grows and libraries are created or updated. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @leerob, So for bugs not resolved in the stable release of App Router that were added in this discussion, should those be split into their own issues now? |
Beta Was this translation helpful? Give feedback.
-
|
Bugs should be reported on GitHub issues following the issue template with a reproduction provided yeah 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Server actions/mutations looks really great! I have two questions.
thank you for great work, Vercel team. |
Beta Was this translation helpful? Give feedback.
-
|
Hey there! Would you mind creating a new discussion? I'm going to close this one out per: #41745 (comment) |
Beta Was this translation helpful? Give feedback.
and others
App Router Stability
Hey folks, exciting news. The Next.js App Router is now stable!
We couldn't have gotten without the literally thousands of replies in this discussion helping us uncover bugs, patch issues, and iterate on our design based on your feedback. We greatly appreciate it. Our focus for the coming weeks will be on fixing any additional bugs that come up during this new wave of feedback.
Now that the router is stable, there are more additions we want to make, many based on the feedback shared here. To help make it easier to track feedback and upvote or discuss specific feature requests moving forward, we're going to close out this discussion.
We've made a new section in Discuss…