Next.js - Directives

Quiz

What are Directives?

Directives are special comments that are used to tell Next.js how to handle a specific part of the application. In general, it is used to specify a component to be rendered on the client-side. Following all the directives used in Next.js:

Client and Server Components

Next.js provides two types of components, client components and server components. Client components are components that are executed and rendered on the client-side. Use client components if you want:

Interactive UI that require client-side JavaScript
Component that include state management
Component that include event handling, and access to browser APIs.

Server components are components that are executed on the server-side and rendered on the client-side. We can use Next.js directives to specify which components should be executed on the client-side or server-side. Use server components if you are want:

Component that include database queries
Component that include API calls
Component that include business logic

Create a Client Component

As mentioned above, client components are components that are rendered on the client-side. Which means the server will not sent a pre built HTML file for the component. Instead, the server will send a JavaScript file that will be executed on the client-side to make HTML file.

Example

To create a client component, you need to add the "use client" directive at the top of the component file. See the code below.

// /app/counter/page.tsx

"use client"

import { useState } from 'react'

export default function Hello() {
  const [count, setCount] = useState(0)

  return (
    <div>
        <h1>Hello, world!</h1>
        <p>You clicked {count} times.</p>
        <button onClick={() => setCount(count + 1)}>
            Click me
        </button>
    </div>
  )
}

Output

The image below shows the output of the code above. Code that include interactive UI will be executed on the client-side.

Create Server Component

To create a server component, you need to add the "use server" directive at the top of the component file. See the code below.

Example

In the code below, we have a server component that fetches data from a database.

// /app/api/action.ts

'use server'
 
export async function fetchData() {
    let data = await fetch('https://jsonplaceholder.typicode.com/users', {
      cache: 'force-cache'
    }).then(res => res.json())
    return data
}

Output

The image below shows the output of the code above. Code that include database queries will be executed on the server-side.

Print Page