%% generate tags start %% #software-engineering %% generate tags end %% #software-engineering/nextjs ==Based on the search results, in Next.js, not everything inside a client component will automatically become a client component.== Here are some key points to understand: 1. Server Components vs. Client Components: - In Next.js, components are primarily server components unless they use the `use client` directive or are imported into a client component[1]. - Client Components enable you to add client-side interactivity to your application. They are pre-rendered on the server and hydrated on the client[3]. - The `use client` directive is a convention to declare a boundary between server and client components[3]. - Components in the client component module graph are primarily rendered on the client, but they can also be pre-rendered on the server and hydrated on the client[3]. 2. Nesting Server and Client Components: - If any server components are nested inside a client component, their rendered content will be placed correctly within the client component[3]. - Next.js advocates for a server-first approach, where the project should primarily consist of server components with sprinkles of client components[5]. 3. `use client` Directive: - The `use client` directive must be defined at the top of a file before any imports to mark it as a client component[3]. - It does not need to be defined in every file. The client module boundary only needs to be defined once, at the entry point, for all imported modules to be considered client components[3]. It's important to understand the distinction between server components and client components in Next.js and use the `use client` directive to mark components as client components when needed. Please refer to the official Next.js documentation and the specific discussions and articles mentioned in the search results for more detailed information and examples. Sources: 1. [GitHub - Confusion around behaviour when importing server components into client components · vercel next.js · Discussion 51050](https://github.com/vercel/next.js/discussions/51050) 2. [Stack Overflow - Can NextJS 13 pre-render client components like static pages in v. 12?](https://stackoverflow.com/questions/76470263/can-nextjs-13-pre-render-client-components-like-static-pages-in-v-12) 3. [Next.js Documentation - Getting Started: React Essentials](https://nextjs.org/docs/getting-started/react-essentials) 4. [Next.js Documentation - Components: <Link>](https://nextjs.org/docs/pages/api-reference/components/link) 5. [DEV Community - Nesting 'dynamic' and 'static' components](https://dev.to/peterlidee/nesting-client-and-server-components-in-next-13-7ik) 6. [PropelAuth Blog - 5 Common Pitfalls with Server Components in Next13 (with examples)](https://www.propelauth.com/post/5-common-pitfalls-with-server-components-in-next13-with-examples) Citations: [1] https://github.com/vercel/next.js/discussions/51050 [2] https://stackoverflow.com/questions/76470263/can-nextjs-13-pre-render-client-components-like-static-pages-in-v-12 [3] https://nextjs.org/docs/getting-started/react-essentials [4] https://nextjs.org/docs/pages/api-reference/components/link [5] https://dev.to/peterlidee/nesting-client-and-server-components-in-next-13-7ik [6] https://www.propelauth.com/post/5-common-pitfalls-with-server-components-in-next13-with-examples