Next js export doesn't get proper static builds

kaansey commented 2 years ago

Hey, thanks for your effort to putting this together. I just tried get static build with the Next js example. In the index.html it only has some js & css files and the props (__NEXT_DATA__). It doesn't look like SEO friendly.

Is there any work around to get static build? Screenshot from the sample project page source

LiveDuo commented 2 years ago

Hey @kaansey,

The static build does not affect Next.js SEO features as far as I'm awair.

So you will have to just change the SEO elements as in any Next.js app.

For example, you can do the following:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
import { ContentProvider } from 'destack'

import Head from 'next/head'

import image from 'path-to-the-cover-image'

function Page(props) { 
  return (
    <div style={{height: '100%'}}>
      <Head>
        <title>My page title</title>
        <meta name="image" content={image} />
        <meta property="og:image" content={image} />
        <meta name="twitter:card" content="summary_large_image"/>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <ContentProvider {...props}/>
    </div>
  )
}

export default Page

Note: To get the code above to work you will also need next-images installed in your project and set up in next.config.js.

kaansey commented 2 years ago

Thanks for your reply. Actually I mean the page source is doesn't look good. For example if you have something like this

When you got the export

yarn export

There is no dom element like below in the index.html. It is only defined in the <script id="__NEXT_DATA__" type="application/json">

<div> hello world </div>

What I expected is static html output like if you try to get export with nextjs sample project you can see the dom element in the index.html

I think it might be because of dynamic component usage on destack?

iojcde commented 2 years ago

Yep, the elements are generated on-fly. Technically, it's not proper static builds, but it's the closest we can go afaik.

LiveDuo commented 2 years ago

Exactly. We are not aware of a way to pre-render dynamic HTML with Next.js so this is not available at the moment. If something comes up in the future we will look into it.

LiveDuo / destack

Next js export doesn't get proper static builds #36