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.
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.