javascript - Is it possible to create client and server component in the same file in NextJS 13? - Stack Overflow

admin管理员组

文章数量:1417691

In my NextJS 13 app, one of my page.tsx files exports a ponent that can almost fully be rendered on the server. The only client interactivity it needs is a button that calls useRouter.pop() when it's clicked.

As far as I know, this means I need to create a new file with the "use client" directive just to export a client ponent that'll consist of just a button element. This seems like a inefficient way of creating a tiny ponent that will only be used in this one place. Is there any way of creating a client ponent within the page.tsx file?

In my NextJS 13 app, one of my page.tsx files exports a ponent that can almost fully be rendered on the server. The only client interactivity it needs is a button that calls useRouter.pop() when it's clicked.

As far as I know, this means I need to create a new file with the "use client" directive just to export a client ponent that'll consist of just a button element. This seems like a inefficient way of creating a tiny ponent that will only be used in this one place. Is there any way of creating a client ponent within the page.tsx file?

• javascript
• reactjs
• typescript
• next.js
• server-side-rendering

Share Improve this question Follow asked Sep 19, 2023 at 20:45 SylithSylith 70977 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Unfortunately in Next.js there is no way of creating both a client and server rendering ponent in a single file.

This seems like a inefficient way of creating a tiny ponent that will only be used in this one place.

The benefits of separating your server page.tsx and your tiny client ponent far outweighs the small inconvenience of having an extra file in your repository.

本文标签： javascriptIs it possible to create client and server component in the same file in NextJS 13Stack Overflow