Any linter rules to help prevent importing server code from client?

Answered

Longtail tuna posted this in #help-forum

Longtail tunaOP

2024-09-12T16:24:30.306Z

My biggest gripe with Next is that it's hard to identify when server code is being unintentionally imported from the client. Until I can use server components in client components (is this on the roadmap?), has anyone found good ways to prevent this? Perhaps linter rules for requiring 'use _' directives and validating rules around their imports?

Answered by joulev

can use server components in client components

that wont happen.

good ways to prevent this

import "server-only"

View full answer

4 Replies

joulev

2024-09-12T16:25:18.647Z

can use server components in client components

that wont happen.

good ways to prevent this

import "server-only"

Answer

Longtail tunaOP

2024-09-12T16:27:37.673Z

nice thanks

Longtail tunaOP

2024-09-12T18:07:54.765Z

Is there an equivalent methodology for client-only code or should I have 'use client' in 100% of client-only files?

joulev

2024-09-12T19:10:40.981Z

* Only put "use client" in entry point client component files (in other words, only put it in the components that are intended to be used directly in server components).

* Other client components do not need and should not have the "use client" directive, if they are only imported to client components. For example <Button onClick={…} />, the Button should not have a "use client" because it can never be used in a server component. If you are worried about accidentally importing such components into server components, rest assured that there will still be build time errors.

* The equivalence for import "server-only" in client components is import "client-only".