Installation

Install the library by running:

npm i server-queries
# or
pnpm i server-queries
# or
yarn add server-queries

Add the webpack/turbopack loader

This library relies on a webpack/turbopack loader to alter the source code for proper isolation of client and server code. To add the loader, update your next.config.js accordingly:

export default {
  // ... existing configuration.

  // For webpack.
  webpack: (webpackConfig) => {
    webpackConfig.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: "server-queries-loader",
          options: { debug: process.env.NODE_ENV === "development" },
        },
      ],
    });

    return webpackConfig;
  },
  
  // For Turbopack and Next.js < 15.3
  experimental: {
    turbo: {
      rules: {
        "./src/**/*.{ts,tsx}": {
          loaders: [
            {
              loader: "server-queries-loader",
              options: { debug: process.env.NODE_ENV === "development" },
            },
          ],
        },
      },
    },
  },

  // For Turbopack and Next.js >= 15.3
  turbopack: {
    rules: {
      "./src/**/*.{ts,tsx}": {
        loaders: [
          {
            loader: "server-queries-loader",
            options: { debug: process.env.NODE_ENV === "development" },
          },
        ],
      },
    },
  },
}

Note

Webpack and Turbopack can be safely used together, e.g. using Turbopack for development and Webpack for production.