rsnext/examples/cms-makeswift
ChanHui 8d45aa9bfb
update @types/react version in examples (#57259)
### What?
When I ran `npx create-next-app --example with-turbopack` and installed
dependencies using `yarn`, I found an typescript error(`'SomeComponent'
cannot be used as a JSX component.`).

<img
src="https://github.com/vercel/next.js/assets/51700274/f6c7e478-c0b1-4ea2-996f-4c0c78e3bb4b"
width=400 />

and I realized that the bug is due to the version of
@types/react(18.0.x).
you can check this issue on
[here](https://github.com/vercel/next.js/issues/42292#issuecomment-1594351684)
too.

### Why?
It seems that there is an error occurring in the @types/react version
18.0.x.

### How?
It would be good to change the @types/react version to 18.2.8 in the
next.js examples.

I think this change will resolve [this
issue](https://github.com/vercel/next.js/issues/55080#issue-1884846177)
[NestJS
documentation](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error)
also states to upgrade the version.

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2023-10-26 19:52:08 -05:00
..
lib/makeswift Add a Makeswift example (#38018) 2022-06-29 13:25:51 -05:00
pages Update cms-makeswift example (#41005) 2022-09-28 11:33:08 -07:00
.env.local.example Update cms-makeswift example (#39834) 2022-08-22 16:02:19 -05:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
next.config.js chore: remove swcMinify: true as it's the new default. (#41877) 2022-10-26 10:55:10 -07:00
package.json update @types/react version in examples (#57259) 2023-10-26 19:52:08 -05:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json Add a Makeswift example (#38018) 2022-06-29 13:25:51 -05:00

A statically generated landing page with Next.js and Makeswift

This example showcases how you can use Makeswift to visually build statically generated pages in Next.js.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

Demo

https://nextjs-makeswift-example.vercel.app/

How to use

  1. Download the example:

    Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

    npx create-next-app --example cms-makeswift cms-makeswift-app
    # or
    yarn create next-app --example cms-makeswift cms-makeswift-app
    # or
    pnpm create next-app --example cms-makeswift cms-makeswift-app
    
  2. Install dependencies:

    yarn install
    # or
    npm install
    # or
    pnpm install
    
  3. Rename the .env.local.example file to .env.local and include your Makeswift site's API key:

    -- MAKESWIFT_API_HOST=
    -- MAKESWIFT_SITE_API_KEY=
    ++ MAKESWIFT_API_HOST=https://api.makeswift.com
    ++ MAKESWIFT_SITE_API_KEY=<YOUR_MAKESWIFT_SITE_API_KEY>
    
  4. Run the local dev script:

    yarn dev
    # or
    npm run dev
    

    Your host should be up and running on http://localhost:3000.

  5. Finally, go to your Makeswift site settings and add http://localhost:3000/makeswift as the host URL and you're all set!

Deploy it

When you're ready to go live, deploy it to the cloud with Vercel (Documentation). All you'll need to do is update your host inside of Makeswift to your Vercel deployment.

Next steps

With Makeswift, you can give your marketing team custom building blocks to create high quality Next.js pages.

To learn more about Makeswift, take a look at the following resources:

You can check out the Makeswift GitHub repository - your feedback and contributions are welcome!