Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

# Velo: About SEO and Routing

<div style="background: #D9F4F4; border: 1px solid #B3E9E8; border-radius: 6px; padding: 7px 17px 7px 17px; width: max-content; margin-top: 5px; margin-bottom: 5px;">Visit the <a style="text-decoration: color: #3197EF;" href="https://www.wix.com/velo" target="_blank">Velo by Wix website</a> to onboard and continue learning.</div>

SEO Settings for [router](https://support.wix.com/en/article/about-routers) pages vary slightly from the settings for regular pages. Learn about SEO for Wix pages [here](https://support.wix.com/en/search-engine-optimization).

You can define the page title, description, and social network images for router pages just like you can for regular pages. The difference is that since router pages do not contain static data, their SEO information must be set dynamically, so they reflect the real content they will hold when they are viewed.

There are two parts to setting up SEO on your router pages:

*   Create meta tags for Google to learn about your pages.
*   Create a sitemap for Google to use to find your pages.

### Meta Tags

You set SEO meta tags for your router's pages when you [create the router's `router()` function](https://support.wix.com/en/article/creating-a-router#router-function). Within that function, you create a [`HeadOptions`](https://www.wix.com/velo/reference/wix-router/wixrouterresponse/head) object and pass it to the page you route to using the [`ok()`](http://wix.to/94BuAAs/wix-router.html#ok) function.

For example, in the sample code that is provided when you add a router, the following code uses the `data` retrieved by the router to build a `HeadOptions` object and pass it to the page named **myRouter-page**.

```javascript
export function myRouter_Router(request) {

  // retrieve data for the page ...
    
  let seoData = { 
    title: data.title, 
    description: "This is a description of " + data.title + " page",
    noIndex: false,
    metaTags: {
      "og:title": data.title,
      "og:image": data.image
    }
  };
       
  return ok("myRouter-page", data, seoData); 
    
  //...
}
```

The `HeadOptions` object contains several properties that you can set with relevant values using the data you retrieve in your `router()` function. The `title` and `description` properties contain the page's title and description that are used for SEO purposes. The object can also contain a `noIndex` flag that tells Google whether it should index your page. Additional meta tags can be added to the `metaTags` property.

The `HeadOptions` object can also contain a `keywords` property, but Google ignores your site's keywords.

### Sitemap

Your site's sitemap is what Google uses to find all your site's pages. Pages on your site that don't belong to a router are added to your site's sitemap for you. However, since you fully control what pages are available through your router, including all of their dynamically different versions, you need to create a sitemap that contains all possible URLs that are connected to your router's prefix so Google can find them.

To add your router's pages to your site's sitemap, you [create a `sitemap()` function](resourceId::45c26122-4387-4692-b9db-ad4a54018c53#sitemap-function-1*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/Coding%20with%20Velo/Creating%20a%20Router.md#sitemap-function-1) for the router. Within that function, you create a [`WixRouterSitemapEntry`](http://wix.to/94BuAAs/wix-router.WixRouterSitemapEntry.html) object for each URL the router can possibly route to. Each `WixRouterSitemapEntry` includes information about a page, such as its URL, title, and name. You can also add additional information about each page, such as how often its content changes, when the last change was, and its relative priority within your site. Google uses the sitemap entries to discover all the pages in your site.

For example, in the sample code that is provided when you add a router, the following code uses the `data` retrieved by the router to build a `HeadOptions` object and pass it to the page named **myRouter-page**.

```javascript
export function myRouter_SiteMap(sitemapRequest) {

  //Convert the data to site map entries
  let siteMapEntries = Object.keys(peopleData).map( (name) => {
    const data= peopleData[name];
    let entry = new WixRouterSitemapEntry(name);
    entry.pageName = "myRouter-page";
    entry.url = "/myRouter/" + name ;
    entry.title = data.title;
    return entry;
  } );

  // Wrap in asynchronic Promise
  return Promise.resolve(siteMapEntries);
}
```

To ensure that your sitemap is working properly, you can get the sitemap from your published site. In a web browser, go to your published site's URL and append **/sitemap.xml** to it. 

For example, for premium sites, if your site's published URL is:

**https://mysite.com** 

Go to:

**https://mysite.com/sitemap.xml**  

For free sites, if your site's published URL is:

**https://username.wixsite.com/site-name**

Go to:

**https://username.wixsite.com/site-name/sitemap.xml**