Skip to content

NextJS with 'use client', StaticSiteGeneration and output: export #2250

Description

@SebastianGode

Scale Version
^3.0.0-beta.139

Framework and version
^14.0.5-canary.43

Code Reproduction
This will error out due to this issue: vercel/next.js#54393

'use client';

import Footer from '/components/Footer';
import Header from '/components/Header';
import '/styles/general.css'
import { defineCustomElements, applyPolyfills } from '@telekom/scale-components/loader';
import '@telekom/scale-components/dist/scale-components/scale-components.css';
import { useLayoutEffect } from 'react'
import { i18n } from '/lib/i18n_config'


export default function RootLayout({ children, params }) {
// This whole hook is needed for Scale, I can't remove it
  useLayoutEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements(window)
    })
  }, [])
  return (
    <html lang={params.lang}>
      <head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
      </head>
      <body>
        <Header></Header>
        {children}
        <Footer></Footer>
      </body>
    </html>
  )
}

// Function to generate static pages
export async function generateStaticParams() {
  return i18n.locales.map((locale) => ({ lang: locale }))
}

The code also can be found in the i18n branch here: https://github.com/opentelekomcloud-infra/circle-partner-navigator-frontend/blob/i18n/app/%5Blang%5D/layout.js
Is there any way to prerender Scale without doing this on the Client-Side using React's useLayoutEffect Hook? This would also be faster as the client doesn't need to fetch the complete JS files form Scale first and just after that start rendering.

Metadata

Metadata

Assignees

No one assigned

    Labels

    supportAsking for help

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions