Upgrading to v2.0

Outstatic v2.0 offers support for Next.js 15. If you are using Next.js 14, please use v1.4 instead.

Params:

On Next.js 15, params should be awaited:

/app/(cms)/outstatic/[[...ost]]/page.tsx

import 'outstatic/outstatic.css'
import { Outstatic } from 'outstatic'
import { OstClient } from 'outstatic/client'
 
export default async function Page(props: { params: Promise<{ ost: string[] }> }) {
  const params = await props.params;
  const ostData = await Outstatic()
  return <OstClient ostData={ostData} params={params} />
}

Styles

We've added a few components which are styled using a outstatic css namespace (id).

To make sure your dashboard works with the new styles, you should add the id to your app/(cms)/layout.tsx's body tag.

/app/(cms)/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body id="outstatic">{children}</body>
    </html>
  )
}

Media Files (No code changes needed)

We are now using a Media Library page. You will have to define a Repo Media Path and a Public Media Path. You will be prompted to set up your paths either from the Media Library page or when trying to upload an image to a document.

It should work the same as before, but with the Media Gallery you will be able to easily reuse images you've already uploaded to your repository.

Common errors:

Cannot find module 'outstatic/client' or 'outstatic/server' or its corresponding type declarations.

Update your tsconfig.json :

# from:
"moduleResolution": "node",
 
# to:
"moduleResolution": "bundler",

Outstatic v2 uses TailwindCSS v4. To upgrade your project you can run the codemode:

npx @tailwindcss/upgrade

If you face other problems, please refer to the TailwindCSS v4 upgrade guide.