Loading video...

Video Failed to Load

Go Home

Next.js security tip: Use "server only" for the code that should never be exposed to the client.

109,311 views • 1 year ago •via X (Twitter)

10 Comments

Andric's profile picture
Andric1 year ago

Never understood why server only is a package and not a directive.

Matija Marohnić 🦋's profile picture
Matija Marohnić 🦋1 year ago

This is really good, it's surprising that among all of talk about security concerns about RSCs and Server Actions in Next.js I've never heard about this.

Alex Sidorenko's profile picture
Alex Sidorenko1 year ago

Here is a great in-depth article about security in Next.js

Vance Lucas's profile picture
Vance Lucas1 year ago

The fact that it is even possible to accidentally ship sensitive server code to the client is a huge red flag. 🚩🚩🚩

Windfan's profile picture
Windfan1 year ago

it's very easy to get confused by "use server" and `import "server-only"`. Now I have 3 different function files to help me, post.server.ts(using server-only), post.action.ts(using "use server") and post.ts(the functions that can be called by server or client components)

Phong's profile picture
Phong1 year ago

in a few years I swear we are going to go full circle again back to client server separation as the latest fad

Terry Carson's profile picture
Terry Carson1 year ago

Nice one...thanks

Prasenjit's profile picture
Prasenjit1 year ago

That's a crucial tip! Keeping sensitive code on the server side is essential for protecting your application. It helps ensure that no confidential data is exposed to users. Thanks for sharing this important reminder!

Artur's profile picture
Artur1 year ago

We need "use security" directive ASAP😁

fulco's profile picture
fulco1 year ago

Wish this was a directory like with sveltekit

Related Videos

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 views • 2 years ago