to use this with Nextjs as a startup engineer, can you add a NextJS example?

[bionicles]

thanks for a simple and documented repo. I like the examples!

in nextjs you can make a folder /pages/api/xxxx.js and it will make them into routes

https://nextjs.org/docs/api-routes/introduction

would it be possible to make an example for wildcard-api with nextjs? (i used npx create-next-app to bootstrap)

this would make it easier to adopt wildcard in react Server Side Rendering projects (next seems pretty popular too)

mainly I'm curious how you'd enable the API to be used both for the SSR part, and from the client-side? it seems easy enough but an official example would be enlightening

[brillout]

Makes sense, I'll implement a Next.js example :-).

You can see an SSR usage of Wildcard with Goldpage, e.g. https://github.com/reframejs/reframe-proto. (See https://github.com/reframejs/reframe.)

I understand that you'd want to go for something more mainstream than Goldpage and I'll implement a Next.js example.

[brillout]

Done https://github.com/reframejs/wildcard-api/tree/master/examples/next.js

Let me know if you have questions.

[kiwicopple]

Not tested, but if you want to do an example with "hooks" and functional components, it would probably look like this:

import { useState } from 'react'
import Link from 'next/link'
import { endpoints } from '@wildcard-api/client'

const Index = props => {
  // You can use hooks here, like this: 
  // const [posts, setPosts] = useState([])

  return (
    <ul>{
      props.posts.map(({id, title}) =>
        <li key={id}>
          <Link href={{pathname: '/posts', query: {id}}} as={"/posts/"+id}>
            <a>{title}</a>
          </Link>
        </li>
      )
    }</ul>
  )
}

Index.getInitialProps = () => {
  const posts = await endpoints.getPostList()
  return {posts}
}

export default Index

[brillout]

The example doesn't really need any state nor hooks. But yes implementing the React components with functions instead of classes would be neat. I'd gladly accept a PR ;-)

@bionicles Any questions? I'll close the ticket if you don't :-)

[brillout]

Feel free to reach out if you have questions.