This all started out as a “I wonder if I’ll be able to make this work” project. Now that I did, I think it’s time to think about where to go with it. I really enjoy writing content in notion (even just for this proof of concept site), so I’d like to use it on my personal site. I could just copy the files that I need to make it work, and I might do that based on my motivation as a first step. However, it would be nice to allow people who also want to have something like this on their site to use it as a module.

Here’s some planning on how that might look.

In general, I don’t want this to be a “Clone this repo / install this module and you have a blog” solution. I want this to be a solution you can plug in to your existing site. Mainly, because that’s what I’m planning to do: I want to use it for my notes section first and see where it goes.

So, I ran npm install next-notion-cms or whatever it may be named.

Then I’d do something like

export const notePosts = new NextNotionCMS({ 
	auth: process.env.NOTION_AUTH,
	db_id: provess.env.NOTES_DB_ID
})

Then, on the index page:

// app/notes/page.tsx

export default async function NotesIndex() {
	const notesList = await notePosts.getAllPosts()

	return (
		<div>
			{notesList.map(note => <NoteListItem some={props} />)}
		</div>
	)
}

And the same for the single page, just with a call for notesPosts.getPost(postId). This returns an object with tow keys: content (a list of react components that can be rendered as the post body) and metadata (currently containing the title and published date).

Not sure if I want to add filters to getAllPosts() or not. For the first iteration I guess it would be fine to leave that up to the user and just pass on whatever properties the page has. Later on it might be a nice convenience option to just be able to say

const notesList = await notePosts.getAllPosts({
	filter: [{
		name: tags,
		type: multiselect
		allow: 'published'	  
	}]
})

This sound like a lot of work and edge cases, so maybe later or not at all.

It would also be nice to be able to pass custom components to new NextNotionCMS for customisation. For now, I just return rather neutral default that should integrate well in an existing tailwind site, but especially for the more complex components, I can imagine usecases for wanting to pass custom components.