NextSaaS

To customize the general information and appearance of your website template, update the configuration in the /config/site.ts file. This file allows you to configure various aspects of your website:


// Host where the site is deployed
host: "https://nextsaas.example.com",
// Will be used in navbar, hero section and footer
name: "NextSaaS",
// Will be used in hero section
description:
  "NextSaaS is a modern SaaS landing page template designed to help you build a beautiful landing page for your SaaS business.",
// Main routes
// PublishedAt is used in sitemap so it can be updated automatically when the site
// is built. Do not forget to update the publishedAt date when you update the content
routes: [
  {
    label: "Home",
    href: "/",
    publishedAt: "2024-04-06",
  },
  {
    label: "Pricing",
    href: "/pricing",
    publishedAt: "2024-04-06",
  },
  {
    label: "About",
    href: "/about",
    publishedAt: "2024-04-06",
  },
  {
    label: "Blog",
    href: "/blog",
    publishedAt: "2024-04-06",
  },
  {
    label: "Help Center",
    href: "/help-center",
    publishedAt: "2024-04-06",
  },
  {
    label: "Contact",
    href: "/contact",
    publishedAt: "2024-04-06",
  },
],
// Legal routes. Can be found in the footer
legalRoutes: [
  {
    label: "Terms & Conditions",
    href: "/legal/terms-and-conditions",
    publishedAt: "2024-04-06",
  },
  {
    label: "Privacy Policy",
    href: "/legal/privacy-policy",
    publishedAt: "2024-04-06",
  },
],
// Social media links. Feel free to remove or add your own. Check IconLinkType for available icons
socialLinks: {
  x: "#",
  linkedin: "#",
  github: "#",
  instagram: "#",
},
// Links to download or use the app that is being promoted. Can be found in the hero section
appLinks: {
  appStore: "#",
  googlePlay: "#",
  web: "#",
},
// If removed the sponsor button will not be displayed
sponsorLink: "#",
// Company information. Can be found in terms and conditions and privacy policy pages
legal: {
  name: "NextSaaS",
  country: "United States",
},
// Contact information. Can be found in the footer and contact page
contact: {
  email: "nextsaas@example.com",
},

Logo

To change the logo displayed across your website, simply replace the /public/images/logo.png file with your own logo image. If you need to create a logo, you can explore free logo generation tools. If you're in need of a logo, consider utilizing free logo creation tools like Marc Lou's logofa.st.

Icons

To generate the required images for Next.js, run the following command:

npm run generate:icons

This command will use the /public/images/logo.png file to generate the necessary images. If you rename the logo file, ensure that you also update the filename in the /scripts/generate-icons.mjs script.

For more information on generating icons for Next.js, refer to the documentation.

That's it! You've successfully configured the base settings for your website. Feel free to further customize the template to suit your needs.

Base Configuration

Logo

Icons