redirect and refresh in Next.js — Smart Redirects and Client Refreshing via Server Actions

1. What Is redirect?

redirect() is a function that navigates the user to a new URL. It can be used in Server and Client Components, Route Handlers, and Server Actions.

Parameters:

• path: The destination URL (relative or absolute)
• type: The redirect type ('replace' or 'push')

Behavior:

• In Server Actions: returns a 303 redirect
• In other contexts: returns a 307 redirect
• In Client Components: only usable during render, not in event handlers

Server Component Example:

import { redirect } from 'next/navigation'

const team = await fetchTeam(id)
if (!team) {
  redirect('/login')
}

Client Component Example:

'use client'
import { redirect, usePathname } from 'next/navigation'

export function ClientRedirect() {
  const pathname = usePathname()
  if (pathname.startsWith('/admin') && !pathname.includes('/login')) {
    redirect('/admin/login')
  }
  return <div>Login Page</div>
}

Redirect via Server Action:

// app/actions.ts
'use server'
import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

2. HTTP Status Code Differences

• 302: Temporary redirect, changes POST to GET
• 307: Temporary redirect, preserves POST method
• 308: Permanent redirect, preserves method

3. What Is refresh?

refresh() is a function that can only be used inside Server Actions. It triggers a client-side router refresh and does not return a value.

Example:

// app/actions.ts
'use server'
import { refresh } from 'next/cache'

export async function createPost(formData: FormData) {
  const post = await db.post.create({
    data: {
      title: formData.get('title'),
      content: formData.get('content'),
    },
  })
  refresh()
}

Important Note:

Using refresh() outside of Server Actions (e.g. in Route Handlers) will throw an error.

Conclusion

redirect() in Next.js enables smart navigation with preserved request methods, while refresh() allows you to re-render client routes after server-side mutations. Together, they help build dynamic, secure, and responsive user experiences.