Next.js Discord

Discord Forum

NextJS 13 APP routing - anti pattern - weird behavior

Siberian posted this in #help-forum
Open in Discord
I'm wondering if I am doing some leakage/incorrect practices in NextJS.

The functionality that I want to happen is

Comment is added via form -> Action is triggered on server -> new comment is added into db -> page is refreshed

It works, but if I change the code in page.tsx and add a single line at the top:

'use server';

I get an error saying you cant pass event listeners to functions... Which is really strange, I heard that all the components inside of the app directory are server by default.

Also, if I don't declare videos outside of the component:
let video: Video | null = null;

And instead declare the variable here

(let) video = await videosDao.getVideoWithCommentsById(;

I'm getting strange errors upon hitting the submit button. What is going on?


let video: Video | null = null;

const VideoPage: NextPage<Props> = async ({ params }) => {
  // Assume you have fetched video, comments, and related videos
  // pass them to their respective components as props

  video = await videosDao.getVideoWithCommentsById(;

  const addComment = async (data: FormData) => {
    'use server';
      let inserted = await commentsDao.insertComment(comment);

      video?.comments?.push(comment as Comment);


  const relatedVideos = await videosDao.getRelatedVideos(video);

  return (
    <div className="grid lg:grid-cols-4 gap-4 mt-2 md:grid-cols-1">
        <AddComment onAddComment={addComment}/>

export default VideoPage;


'use client';

const AddComment: React.FC<AddCommentProps> = ({ onAddComment }) => {

  return (
    <div className="flex flex-row space-x-4 lg:w-11/12 md:w-full p-4 shadow rounded bg-gray-800">
      <form action={onAddComment} className="flex flex-row space-x-4 flex-grow">
        <div className="flex-1">......

5 Replies

A side question:

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); // This prevents the default form submission behavior

startTransition( async () => {
// Create FormData instance
const data = new FormData(event.currentTarget);

// Call the server action
let res = await onAddComment(data);

// Display the error message if it exists
if(res.error) {
setError(res.error.charAt(0).toUpperCase() + res.error.slice(1));
} else {

// If the comment was successfully added, reset the input fields
if(res.success) {

If I change the code in AddComment in this way, where I'm taking a server function and calling it onSubmit, is this an antipattern and is my parent component (page.tsx) still a server page?
Alfonsus Ardani
"use server" does not mean mark a component into server component and does not have anything to do with react components at all
Thanks, so I just confused that with the 'use client' directive, which does mark the component as client sided and allows for the usage of useState etc?
Alfonsus Ardani