Next.js Discord

Discord Forum

Server Actions are not supported

Answered
Leap posted this in #help-forum
Open in Discord
LeapOP
Hey all, been struggling with this for a while now. I'm trying to export a static site, but I keep hitting the following message.

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    

> Server Actions are not supported with static export.


I am using the app router, and I am fetching content (supposedly at build time?) from a CMS (Sanity) using functions like this:

// client is provided by the next-sanity API
const getPageData = cache(async () => {
    const query = `some groq query here`;

    return await client.fetch(query);
});


I suspected next/image to be the issue, but I've removed it from my code and had no luck. Additionally I am using a custom loader provided by Sanity, which I believe should support static builds anyway making this irrelevant.

The error message is not particularly helpful. Any assistance would be greatly appreciated!

Here's my next info.

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 15951
  Available CPU cores: 16
Binaries:
  Node: 18.20.1
  npm: 10.7.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: export
Answered by Vespid wasp
given that you aren't using any next features is there a react-sanity package you could use instead?
View full answer

37 Replies

The reason is that, with static export, Only the files are sent to the client, hence server side actions can't execute
You can remove any route.ts file, or any files which have "use server" at the top to resolve the issue
LeapOP
What's confusing me is that I don't have any server actions in my project. To be absolutely sure, a search for "use server" comes up empty.
Anay-208
are you sure all files are "use client"?
LeapOP
Ah, is that a requirement for static export?
I may be missing a few
Anay-208
I believe
@Anay-208 I believe
Vespid wasp
no, you don't need use client for all files
that will cause all rendering to happen on the client rather than pre-rendering at build time
LeapOP
Yeah, that's what my understanding was. The goal is for most of my components to be pre-rendered since they're just simple DOM elements.
Does this mean it's a 3rd party library I'm using that's implementing a server action?
And if so, what's the easiest way to figure it out
    "dependencies": {
        "classnames": "^2.5.1",
        "clsx": "^2.1.1",
        "lodash": "^4.17.21",
        "next": "14.2.3",
        "next-sanity": "^9.0.20",
        "next-sanity-image": "^6.1.1",
        "react": "^18",
        "react-dom": "^18",
        "react-player": "^2.16.0",
        "sharp": "^0.33.4",
        "yet-another-react-lightbox": "^3.19.0"
    },
    "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@next/third-parties": "^14.2.3",
        "@sanity/asset-utils": "^1.3.0",
        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
        "@types/lodash": "^4.17.4",
        "eslint": "^8",
        "eslint-config-next": "14.2.3",
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "typescript": "^5",
        "prettier": "^3.3.0",
        "prettier-plugin-tailwindcss": "^0.5.14"
    }
can't run sharp in browser
I've used jimp for processing in browser, but I'm not sure what the use case is
sharp should be fine if you run it in a server component because it will run once on build
so maybe something is a client component that shouldn't be
LeapOP
Not sharp :\ Turns out I didn't need it anyway
Wondering if it's something to do with the sanity API
Vespid wasp
that could do it
LeapOP
Ok so I've stripped it down to this:
// page.tsx
import { createClient } from "next-sanity";

export const client = createClient({
    apiVersion: "2024-05-11",
    dataset: "production",
    projectId: "0umgd4pv",
    useCdn: false,
});

async function getPageData() {
    const query = `*[_type == "property" && slug.current == $slug][0] {
        address,
        statistics,
        gallery[] {
            ...,
            asset->{
                ...,
                metadata
            }
        },
        hero {
            ...,
            asset->{
                ...,
                metadata
            }
        },
        matterport,
        client->,
        floorplan,
        video,
        description,
        website,
        slug,
    }`;

    return await client.fetch(query, { slug: "884-ursa-lane" });
}

export default async function Page() {
    const pageData = await getPageData();

    return (
        <>
            <h1>{pageData.address.street}</h1>
        </>
    );
}
So just an API call
And it's still not letting me build
So it's something to do with the data fetching
Vespid wasp
you tried putting use server at the top?
wouldn't expect it to fix, but it might
LeapOP
No luck
async function getPageData() {
    const query = `*[_type == "property" && slug.current == $slug][0] {
        address,
    }`;

    return await client.fetch(query, { slug: "884-ursa-lane" });
}

const cachedFunction = cache(getPageData);

export default async function Page() {
    const pageData = await cachedFunction();

    return (
        <>
            <h1>{pageData.address.street}</h1>
        </>
    );
}


No luck with caching either, although the next-sanity docs mention it's not necessary
Vespid wasp
given that you aren't using any next features is there a react-sanity package you could use instead?
Answer
LeapOP
That did it!
import { createClient } from "@sanity/client";
import { cache } from "react";

const client = createClient({
    apiVersion: "2024-05-11",
    dataset: "production",
    projectId: "0umgd4pv",
    useCdn: false,
});

async function getPageData() {
    const query = `*[_type == "property" && slug.current == $slug][0] {
        address,
    }`;

    return await client.fetch(query, { slug: "884-ursa-lane" });
}

const cachedFunction = cache(getPageData);

export default async function Page() {
    const pageData = await cachedFunction();

    return (
        <>
            <h1>{pageData.address.street}</h1>
        </>
    );
}
Just swapped out next-sanity with their vanilla @sanity/client library
You're the best, ty for the help
Vespid wasp
np