How do I add collection specific index pages to an existing Next.js project

[arnab]

Hi @avitorio and folks!

I am trying to add Outstatic to an existing Next.js website. I am fairly new to Next.js (and brand new to Outstatic). I followed the guide, including Adding Outstatic to a Next.js website and:

• I can access the Outstatic admin (content editor) on my localhost.
• I added two collections posts, and docs
• I added two "hello world" documents in these collections and published them.
• I see that the files are added/committed in github, and succesfully deployed in Vercel.
• However, I can't find the rendered posts anywhere on my localhost, or on my deployed site on Vercel
  • The site is access-protected right now (as we have not launched it yet), so I can't share the URL yet.
  • But I have tried http://localhost:3000/hello-world, http://localhost:3000/posts/hello-world, http://localhost:3000/outstatic/content/posts/hellow-world etc.
  • They all just render the /not-found 404 route/page.

I think the guide assumes that you want to manage the whole website with Outstatic (even if you are adding it an existing Next.js site)? What I want to do is:

• Continue my Next.js site as-is (I already have /, and some sub-pages and a dynamic web-app built under /app/
• I want to have /posts be the index for the Outstatic created/managed documents in the posts collection.
• Similarly I want to have /docs show the index for docs collection.
• I am happy to write these routes (but need some guidance if I am on the right track, and some code examples, or pointers to docs). Do I essentially need to implement this myself, following: https://outstatic.com/docs/fetching-data ?
• I like the look/feel of the index pages and document pages produced by Outstatic. Is there a way I can reuse those, but just produce the above indexes (and then underlying pages), so /posts and /posts/hello-world?

[avitorio]

Hey @arnab,

Outstatic is a CMS, it only manages content. The frontend/design implementation is something you'd have to work on yourself.

So in other words, yes. You'd need to create the logic to fetch data and display it on the site using our helper functions from the fetching-data section of the docs.

You can find examples in our examples folder. Look through the code and routes of the advanced-blog example.

There you will find all the code needed to display the content generated by Outstatic on your frontend. I hope this helps.

[arnab]

Thanks @avitorio - I was able to get it working. Closing this.

[avitorio]

Thanks for the update!