Next.js Discord

Discord Forum

publish a static folder in route group

Answered
Britannia Petite posted this in #help-forum
Open in Discord
Britannia PetiteOP
Is it possible to make Next.js keep the contents of a static folder thats nested within a route group?

I’m working on implementing a Sanity’s new Create feature. It requires couple of files to be in a specific location. I’m using version 14.3.2 of Next.js and the app router. My app folder structure looks like this:
├── app
│   ├── (studio)
│   │   ├── admin
│   │   │   ├── [[...index]]
│   │   │   │   └── page.tsx
│   │   │   └── static
│   │   │       └── .gitkeep
│   │   │     
...

On build, a script runs and generates two JSON files in the /app/(studio)/admin/static directory, and I’ve confirmed the files are generated during the build by listing the directory contents in the build script. The build logs show the files were created (screenshot). When checking the build’s files, though, the json files in the screenshot don’t exist. The deployment’s source/output files don't mention the static folder at all.

Here’s an excerpt of my run script that generates those files:
"scripts": {
    "prebuild": "npm run typegen && npm run extract-manifest",
    "build": "next build",
    "start": "next start",
    "extract-manifest": "cd src/sanity && sanity manifest extract --path '../app/(studio)/admin/static' && ls -all '../app/(studio)/admin/static'",
    "typegen": "cd src/sanity && sanity schema extract --path ../../sanity-schemas.json && sanity typegen generate"
  },

I’m not sure if this is related to the route group, optional catch-all, or something else entirely. Ultimately I need to be able to populate the admin/static folder with the json files created during build. Any tips on how to achieve this?

I tried the following in my next config, but it didn't work.
  experimental: {
    outputFileTracingIncludes: {
      '/admin/static': ['./src/app/(studio)/admin/static/**/*'],
    },
  },
Answered by Britannia Petite
We ended up using a rewrite to solve for this.
  rewrites: async () => {
    return [
      {
        source: '/admin/static/:slug',
        destination: '/static/:slug',
      },
    ]
  },
View full answer

1 Reply

Britannia PetiteOP
We ended up using a rewrite to solve for this.
  rewrites: async () => {
    return [
      {
        source: '/admin/static/:slug',
        destination: '/static/:slug',
      },
    ]
  },
Answer