migration hompage's next.js code to 13+ version

[DongjaJ]

What this PR does / why we need it?

migration hompage's next.js code to 13+ version(page >> app)

Any background context you want to provide?

What are the relevant tickets?

Fixes #96

Checklist

• Added relevant tests or not required
• Didn't break anything

[hackerwins]

Thanks for your contribution.

While looking at the PR, I had two questions.

A. An error occurs when opening /docs

The /docs page could not be accessed. Can you possibly find the cause?

1 of 1 unhandled error
Server Error
Error: Page "/docs/[[...slug]]/page" is missing exported function > "generateStaticParams()", which is required with "output: export" config.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
DevServer.renderToResponseWithComponentsImpl
file:///Users/hackerwins/Development/yorkie-team/yorkie-team.github.io/node_modules/next/dist/server/base-server.js (959:27)

B. Invalid next.config.js options detected when running npm run dev

It looks like some options have been changed or removed. Could you look into the cause?

⚠ Invalid next.config.js options detected:
⚠ Expected string, received number at "env.nextImageExportOptimizer_quality"
⚠ Expected string, received boolean at "env.nextImageExportOptimizer_storePicturesInWEBP"
⚠ Expected string, received boolean at "env.nextImageExportOptimizer_generateAndUseBlurImages"

[DongjaJ]

A. The bug is not reproduced in my development environment. Can you explain it in detail?
I found that bug. I'll try this

B.
This occurs in next.js 13.5 and later versions.
In next.config.js file, next.config.env's type is Record<string,string>. But the current setting of the project is not

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
   ...
  env: {
    nextImageExportOptimizer_imageFolderPath: 'public/assets/images',
    nextImageExportOptimizer_exportFolderPath: 'out',
    nextImageExportOptimizer_quality: 75,
    nextImageExportOptimizer_storePicturesInWEBP: true,
    nextImageExportOptimizer_generateAndUseBlurImages: true,
    NEXT_PUBLIC_BUILT_AT: new Date().toUTCString(),
  },
  ...
    return config;
  },
};

module.exports = nextConfig;

So I changed next.config.js.

[DongjaJ]

I solve bug A. That is because of the dynamic parameters option. So I removed that options.

vercel/next.js#56477
vercel/next.js#56253

But I found another bug.

An error occurs when opening /docs/sample

/docs/sample/sample-nested, /docs/sample/sample-nested2 path is OK. but only /docs/sample path occurs error.

Unhandled Runtime Error
Error: Cannot access ContentWrapper.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

I think It related this issue.
vercel/next.js#56153
hashicorp/next-mdx-remote#405

So I'm solving this bug now.

[DongjaJ]

It's been a long time since I worked on it.
I think I'd better work on it again.

I will rewrite the new pull request