Notion Capture

This starter shows how to use the new Notion API with Next.js. You can capture emails that will populate a Notion database.

Live Demo • See more starters • Follow me on Twitter

Deploy your own

Deploy the example using Vercel.

How to use

Change into the project directory and run the following command:

yarn && yarn dev

Update Notion Keys

You need to add the following to your env.local file (and in the environment variables in Vercel/Netlify when deployed).

MY_NOTION_TOKEN=
DATABASE_ID=

You can find more details on how to get these here.

Update Site Metadata

You can update your site metadata in the next.config.js file.

env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://notioncapture.vercel.app',
  siteImagePreviewUrl: '/images/preview.png',
  twitterHandle: '@your_handle'
} 

Update Colors

You can update the color palette in tailwind.config.js file.

colors: {
  palette: {
    light: '',
    primary: '',
    dark: '',
  },
},

Update Image

The images are generated from the Unplash Random API. The cool gradient effect on the images is achieved by using the Tailwind Mix Blend Mode feature. You can experiment with this effect using this tool.

Update Progressive Web App (PWA) data

Update the manifest.json file and the icons under the public/images/icons folder.

You can use free tools online such as https://realfavicongenerator.net/ to quickly generate all the different icon sizes and favicon.ico file.

Want to have someone set it up for you?

Hit me up on Twitter and let's chat :)

If you are looking for more choices/ production ready websites I have more templates that might suit your needs.