【Next.js】nuqsを導入する方法

Next.js

Posted at 2025-06-20

nuqsとは

nuqsは状態をクエリパラメータで管理するためのライブラリです。

インストール

Yarnを使用している場合、以下のコマンドを実行してインストールします。

yarn add nuqs

アダプタ

Next.jsのApp Routerを使用する場合にはRootLayoutの{children}をNuqsAdapterコンポーネントでラップします。

import { NuqsAdapter } from 'nuqs/adapters/next/app'
import { type ReactNode } from 'react'
 
export default function RootLayout({
  children
}: {
  children: ReactNode
}) {
  return (
    <html>
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  )
}

使い方

以下のように記述することでカウントをクエリパラメータで管理できるようになります。

"use client"

import { useQueryState } from "nuqs"

export function Demo() {
  const [count, setCount] = useQueryState(
    "count",
    parseAsInteger.withDefault(0),
  )
  return (
		<button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
  )
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up