Launch Stuff

SEO

SEO features in this template are split into two parts. There is a basic configuration to generate SEO tags for any page, and a helper function to customize them for a specific page.

1. Basic configuration

Head over to @/config/site.ts and fill in basic information about your app – brand details, support email, and SEO-related content.

// config/site.ts
 
export const brandName = 'My App Name';
export const brandTitle =
  'The title shown on Google search results, and other places';
export const brandDescription =
  'The description shown on Google search results, and other places';
export const supportEmail = 'support@email.com';
export const logo = 'logo.png';
 
export const shareImage = 'shareImage.png';
export const twitterUsername = '@handle';
export const keywords = 'Some keyword, another keyword';

2. Customizing SEO tags

You can customize SEO tags for a specific page without rewriting all the tags using the getSEO() function in @/utils/seo:

// // Example of page-specific SEO customization
import { getSEOTags } from '@/utils/seo';
 
export const metadata = getSEOTags({
  title: 'Sign Up',
  description: 'Create your account',
  canonicalUrlRelative: '/signup'
});
 
...
 
export default MyComponent;

getSEOTags() supports a wide list of metadata for overriding that you can easily customize:

type SEOOverrides = {
  title?: string;
  description?: string;
  keywords?: string;
  url?: string;
  image?: string;
  canonicalUrlRelative?: string;
  /* Add any other override types you might need here, and make sure to modify the getSEOTags() function appropriately */
};

Customer Support

Follow these steps to enable customer support features in your app:

1. Create a Crisp Account

Visit Crisp and create an account.

2. Obtain Crisp Website ID

Create a new website in Crisp and copy the website ID from Website Settings > Settings > Setup instructions.

3. Configure Crisp in Your App

Paste your Crisp website ID in the crispId field of the @/config/site.ts file.

export const crispId = 'YOUR_CRISP_WEBSITE_ID';

Error handling

The template also includes robust error handling to ensure a smooth user experience.

JavaScript Errors

JavaScript errors are gracefully handled by showing the @/app/error.tsx page.

404 (Not Found) Errors

Error 404 (not found) is handled gracefully by showing the @/app/not-found.tsx page.

User Interaction

When an error occurs, an error page is displayed, and users can easily reach out for support using the ButtonSupport component.

By default, clicking the support button will open the Crisp customer chat if the Crisp website ID is present in the config file. (Follow the Customer Support tutorial for integration.)

If the Crisp website ID is not configured, the support button will open the user's mail client and allow them to send an email to your support email address (specified as supportEmail in @/config/site.ts).