blazity / next-saas-starter

⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

✨ Free Next.js marketing website template for SaaS startups ✨

Everything you need to build a great landing page / marketing website for your startup. Great SEO metrics, Green WebVitals, 🚀 Performance, Clean & Pragmatic Codebase out of the box.

View Demo . Report Bug . Request Feature

Created with ❤️ at Blazity

Blazity is a group of Next.js/Jamstack/Headless experts. Contact us at [email protected] if you’d like to talk about your project or just to have a chat with us

Table Of Contents

• Features
• Getting Started
• One click deploy
• Built With
• Contributing
  • Creating A Pull Request
• Acknowledgements
• Contributors
• License

Features

• ⚡ Next.js - React framework for static rendering
• Best SEO setup - Meta Tags, JSON-LD and Open Graph Tags
• Tina CMS integration - local & (optional) production CMS
• Optimized for Web Vitals
• Blog with MDX
• Mailchimp Integration - for newsletters
• Sendgrid Integration - for sending emails
• Dark mode - and customizable themes!
• No UI library - just styled components, so you don't have to learn any new syntax
• One click deployment - with Vercel or any other serverless deployment environment
• Eslint - with Next.js's recommended settings and imports sorting rule
• Prettier

🤓 Getting Started

• Click Use the template or this link
• Setup your sendgrid API key and add it to environment variables (SENDGRID_API_KEY - .env.local)
• Adjust the template to your needs (and checkout env.ts file)
• Deploy the project on Vercel don't forget to add env variables
• (optional) Create Tina Cloud account, a project and fill these NEXT_PUBLIC_ORGANIZATION_NAME, NEXT_PUBLIC_TINA_CLIENT_ID env vars with proper values

  Tina's Content API authenticates directly with GitHub removing the need for users to create GitHub accounts. Access is granted through the dashboard, allowing users to login directly through your site and begin editing! Any changes that are saved by your editors will be commited to the configured branch in your GitHub repository.

  • For more details see the docs

# run the dev mode
$ yarn dev

# run the prod mode
yarn start

# build the app
yarn build

Hint: To edit the blog pages go to /admin and navigate to a blog page to edit it. To exit editing mode navigate to /admin/logout

🚀 One click deploy

Clone the repository and one-click deploy to Vercel for free!

Clone the repository and one-click deploy to Netlify for free!

🧰 Built With

• Statically generated pages with Next.js
• Styled components
• MDX
• TypeScript

🤲🏻 Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request after you edit the README.md file with necessary changes.
• Create individual PR for each suggestion.

Creating A Pull Request

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

😎 Acknowledgements

Big thanks to authors of these libraries:

• https://github.com/neg4n/next-api-og-image - generating open graph images
• https://github.com/blazity/nextjs-color-mode - non-flickering dark mode
• https://github.com/Brew-Brew/css-in-js-media - a convenient way of creating media queries

Support

If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.

✨ Contributors

Thanks goes to these wonderful people (emoji key):

Bart Stefanski 💻

Igor Lasota 💻

Jan Bryński 💻

Logan Anderson 💻 📖 🧑‍🏫

This project follows the all-contributors specification. Contributions of any kind welcome!

📝 License

Distributed under the MIT License. See LICENSE for more information.

next-saas-starter's Issues

How is the LOGO made?

The logo in the project is an SVG file. I want to know how to make this two-color（Dark/light） LOGO. Can you tell me?

stripe integration

Tina CMS is outdated

The current version of tinacms is outdated, causing errors.
It shoud be updated to the latest "tinacms": "^1.0.0" and "@tinacms/cli": "^1.0.0".

enable gfm (github-flavored markdown) rendering of mdx blog posts

I noticed "remark-gfm": "^3.0.1", listed in /package.json but am unsure how to enable GFM rendering of mdx files in the template's /posts directory. For example, - [ ] task lists aren't rendered with checkboxes¹.

Footnotes

1. footnotes also don't work ↩

Delete unnecessary vscode settings

CORB Error MailChimp

Hi I updated the mailchimp subscribe URL but getting this CORB error, any idea on what I might be doing wrong?? is this the right URL?

Origin Read Blocking (CORB) blocked cross-origin response https://gmail.us5.list-manage.com/subscribe?u=741ebbdd766d7b86cd39ab722&id=8344827ebb&EMAIL=jamesryebread%40gmail.com&c=__jp1 with MIME type text/html.

Dropdown menu/multilevel menu

TinaCms Edit Text Error

Hi;
Creating a space in vercel to use the theme today. I seem to get an error in the blog section when I do it on TinaCms

``Tina caught an error while updating the page:

Cannot read properties of null (reading 'getPostsDocument')

If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.``

Tina CMS is not working

Hello Tina CMS is not working.

Tina didn't find
any queries to
generate forms for.

Multi Language integration would be awesome

Nice starter template, thanks for it.
Is there a chance to get this with multi-language support?

Automatic og-image creation

FeatureGallery short descriptions cause image on right to shrink

Changing the default text in FeaturesGallery.tsx to something short causes the component to render correctly initially then shrink incorrectly. The description needs to be long for this component to work correctly.

to reproduce just change the description to one word like so.

{
    title: 'Find relevant media contacts - multiline title',
    description:
      '<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quidem ipsam ratione dicta quis cupiditate consequuntur laborum ducimus iusto velit.</p>',
    imageUrl: '/demo-illustration-3.png',
    baseColor: '249,82,120',
    secondColor: '221,9,57',
  },

to

{
    title: 'Find relevant media contacts - multiline title',
    description:
      '<p>Lorem</p>',
    imageUrl: '/demo-illustration-3.png',
    baseColor: '249,82,120',
    secondColor: '221,9,57',
  },

how to make next-dark-theme default 🙏

How would I make this theme default to dark mode? Changing the className in _document.tsx shows the change when viewing source in browser, but still shows as "next-light-theme" when using "Inspect Element" browser function to view the rendered DOM.

next-saas-starter/pages/_document.tsx

Line 37 in 375ae1b

<body className="next-light-theme">

How to add a new news or blog?

Now there are a few fixed, and the list page does not change after tinacms is modified

[Feature Request] Next 13

Hi !
Is somewhere in the roadmap to merge this template from Next 12 to NextJS 13?

Thanks for the information!

master HEAD is not compatible with latest TinaCMS

On ubuntu, built with

yarn install && yarn build && yarn start

goto /admin page, click edit with tinacms

You will see error:

framework-25a84902f454c528.js:1 Error: schema is required to be passed as a property to TinaProvider. You can learn more about this change here: tinacms/tinacms#2823

Thank you

Improve Best Practices, A11y and SEO metrics

vercel error - Build Failed Command "npm run build" exited with 1

I am getting this error below when I deploy the project to vercel, any help is appreciated, thanks.

Can it get image from Instagram?

This is what I got when try to load Instagram image

/pages/api/image-proxy.js

import { withImageProxy } from '@blazity/next-image-proxy'

export default withImageProxy({
  whitelistedPatterns: [/^https?:\/\/(.*).cdninstagram.com/] 
})

/pages/index.js

const url = 'https://scontent-lax3-2.cdninstagram.com/v/t51.2885-15/317193037_1200508460548428_7875630962554406174_n.jpg?stp=dst-jpg_e35_p1080x1080&_nc_ht=scontent-lax3-2.cdninstagram.com&_nc_cat=100&_nc_ohc=EfCsI3Ie_UYAX_7GUFR&edm=APU89FABAAAA&ccb=7-5&oh=00_AfDX_6YrEWOEUpkP24VqWOnJSUG1qAomz_uv1PXrAiZvIQ&oe=63C4DD80&_nc_sid=86f79a'

<Image 
  className="object-cover"
  key={key}
  src={`/api/image-proxy?imageUrl=${url}`}
  alt={item.caption}
  width={500}
  height={500}
/>

Tina didn't find any queries to generate forms for.

When I attempted to edit the page, I encountered the following error message: “Tina didn't find any queries to generate forms for..”

How can I edit the page?

How to remove watermark popup?

How can I remove this? Do I have to pay for the theme?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update react monorepo (@types/react, eslint-plugin-react-hooks)
• Update dependency @babel/eslint-parser to v7.24.1
• Update dependency tinacms to v1.6.2
• Update dependency eslint to v9
• Update github/codeql-action action to v3
• Update remark to v4 (major) (remark-breaks, remark-gfm)
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency eslint-plugin-react to v7.34.1
• Update dependency polished to v4.3.1
• Update dependency react-hook-form to v7.51.3
• Update dependency typescript to v5.4.5
• Update nextjs monorepo (@next/bundle-analyzer, eslint-config-next, next)
• Update dependency @fec/remark-a11y-emoji to v4
• Update dependency @sendgrid/mail to v8
• Update dependency copy-webpack-plugin to v12
• Update dependency date-fns to v3
• Update dependency react-share to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency @types/react-mailchimp-subscribe to v2.1.4
• Update dependency all-contributors-cli to v6.26.1
• Update dependency styled-components to v5.3.11 (styled-components, @types/styled-components)
• Update dependency @svgr/webpack to v8.1.0
• Update dependency @tinacms/cli to ^0.62.0
• Update dependency eslint to v8.57.0
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-jsx-a11y to v6.8.0
• Update dependency swiper to v9.4.1
• Update actions/checkout action to v4
• Update dependency @tinacms/cli to v1
• Update dependency eslint-config-prettier to v9
• Update dependency prism-react-renderer to v2
• Update dependency react-animate-height to v3
• Update dependency styled-components to v6
• Update dependency swiper to v11
• Update nextjs monorepo to v14 (major) (@next/bundle-analyzer, eslint-config-next, next)
• Update react monorepo to v18 (major) (@types/react, react, react-dom)

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

• actions/checkout v3
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

npm

package.json

• @accessible/drawer ^3.0.2
• @n8tb1t/use-scroll-position ^2.0.3
• @sendgrid/mail ^7.7.0
• @svgr/webpack ^8.0.0
• css-in-js-media ^2.0.1
• date-fns ^2.29.3
• gray-matter ^4.0.3
• lodash ^4.17.21
• next 12.1.0
• nextjs-color-mode ^1.0.5
• polished ^4.1.3
• prism-react-renderer ^1.3.5
• react 17.0.2
• react-animate-height ^2.0.23
• react-dom 17.0.2
• react-hook-form ^7.17.4
• react-mailchimp-subscribe ^2.1.3
• react-schemaorg ^2.0.0
• react-share ^4.4.1
• reading-time ^1.5.0
• schema-dts ^1.1.2
• styled-components ^5.3.5
• swiper 9.3.2
• tinacms ^1.5.8
• url-loader ^4.1.1
• use-clipboard-copy ^0.2.0
• use-resize-observer ^9.1.0
• @babel/eslint-parser ^7.11.0
• @fec/remark-a11y-emoji ^3.1.0
• @next/bundle-analyzer ^13.3.1
• @tinacms/cli ^0.60.0
• @types/react ^17.0.20
• @types/react-mailchimp-subscribe ^2.1.1
• @types/styled-components ^5.1.25
• @types/swiper ^6.0.0
• @typescript-eslint/eslint-plugin ^5.0.0
• @typescript-eslint/parser ^5.59.9
• all-contributors-cli ^6.26.0
• copy-webpack-plugin ^11.0.0
• eslint ^8.0.0
• eslint-config-next ^13.2.4
• eslint-config-prettier ^8.3.0
• eslint-config-react-app ^7.0.0
• eslint-plugin-flowtype ^8.0.0
• eslint-plugin-import ^2.24.2
• eslint-plugin-jsx-a11y ^6.7.1
• eslint-plugin-react ^7.25.1
• eslint-plugin-react-hooks ^4.6.0
• next-mdx-remote ^4.4.1
• remark-breaks ^3.0.1
• remark-external-links ^9.0.1
• remark-footnotes ^4.0.1
• remark-gfm ^3.0.1
• remark-sectionize ^2.0.0
• remark-slug ^7.0.1
• typescript 5.1.6

---

• Check this box to trigger a request for Renovate to run again on this repository

Type error: Property 'getPostsList' does not exist on type 'Query'.

Hi! I'm very new to node and I'm having trouble building my landing page with this template.

I get this error
Type error: Property 'getPostsList' does not exist on type 'Query'.

Unhandled Runtime Error Error: `schema` is required to be passed as a property to `TinaProvider`. You can learn more about this change here: https://github.com/tinacms/tinacms/pull/2823

Unhandled Runtime Error
Error: schema is required to be passed as a property to TinaProvider. You can learn more about this change here: tinacms/tinacms#2823

Tried to import and find schema. no luck. not sure how the pull/2823 applies to it. there is a but no in _app.tsx

Build (and vercel deployment) fails: [slug].tsx:23:18 Type error: Property 'query' does not exist on type 'never'.

$ yarn build
yarn run v1.22.19
$ yarn tinacms server:start -c "next build"
$ /workspaces/website/node_modules/.bin/tinacms server:start -c 'next build'

server:start will be deprecated in the future, please use `tinacms dev` instead
        Typescript types => /workspaces/website/.tina/__generated__/types.ts
        GraphQL types ====> /workspaces/website/.tina/__generated__/schema.gql

Indexing local files ⠋
Starting Tina asset server
Visit the GraphQL playground at http://localhost:4001/altair/
or
Enter the CMS at [your-development-url]/admin/index.html 

warn  - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

./pages/blog/[slug].tsx:23:18
Type error: Property 'query' does not exist on type 'never'.

  21 |   
  22 |   const { data } = useTina({
> 23 |     query: props.query,
     |                  ^
  24 |     variables: props.variables,
  25 |     data: props.data,
  26 |   });
info  - Checking validity of types .child process exited with code 1
error Command failed with exit code 1.

failed to npm run start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
Error: Could not find a production build in the 'E:\repo\landing-page-next.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
at NextNodeServer.getBuildId (E:\repo\landing-page-next\node_modules\next\dist\server\next-server.js:130:23)
at new Server (E:\repo\landing-page-next\node_modules\next\dist\server\base-server.js:92:29)
at new NextNodeServer (E:\repo\landing-page-next\node_modules\next\dist\server\next-server.js:74:9)
at NextServer.createServer (E:\repo\landing-page-next\node_modules\next\dist\server\next.js:111:16)
at async E:\repo\landing-page-next\node_modules\next\dist\server\next.js:123:31
child process exited with code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

First, I was getting error @types/react are not installed, I resolved this by upgrading nextjs and react versions. then, I was able to run my local server.

Now, I am getting this error on root page and pages cannot load. It would be great if I get the details to fix this issue. Thanks

Error with 'next/document' import when running production build

I cloned the repo, didn't change a thing. Tried to run both yarn run build and npm run build and the same issue occured with each.

Here is the page from the next docs about the error message:
https://nextjs.org/docs/messages/no-document-import-in-page

Searching globally for 'next/document' turned up no results outside of it's location in the _document.tsx file.

I'll keep troubleshooting and will update this issue is I find a solution.

Hot reload / Fast refresh is not working

To reproduce:

1. Clone this repo
2. yarn install && yarn dev
3. Make a change in one of the react components
4. You will not see any change propagated on localhost:3000

I would have to stop the server and do yarn dev to see the change.

Is this related to a "bad" import? See https://stackoverflow.com/q/61033562/4191951.

Can we update Next and React versions?

When I update, I get all sort of problems

Why are older post first on the /blog page?

Why are older post first on the /blog page?