app/

Updated on

The app/ directory is where most of your pages and api routes will live.

In Next.js, this is referred to as "App Router".

What's inside?

Depending on the configuration of your boilerplate, you may have a few different files in this directory.

Here's an overview:

  • app/[...slug] this is a catch-all route that will match any path that isn't matched by another route. This is where dynamic pages live, such as blog posts, tag pages etc. If no page is found for the given path, the not-found.tsx page will be rendered.
  • app/about this is a static page that will be rendered at /about
  • app/all-articles this will render the 'homepage' of your blog; a list of all articles and tags that were automatically generated from your markdown files.
  • app/api this is where your api routes live. You can read more about this in the API Routes section. Shipixen comes with an API route to dynamically render your OpenGraph image.
  • app/pricing this is a static page that will be rendered at /pricing
  • app/privacy this is a static page that will be rendered at /privacy
  • app/tags this contains the dynamic tag pages that will be rendered at /tags/[tag] etc.
  • app/terms this is a static page that will be rendered at /terms
  • app/layout.tsx this is the layout component that wraps all pages. You can add global styles and components here.
  • app/not-found.tsx this is the page that will be rendered if no page is found for a given path.
  • app/page.tsx this is the page that will be rendered for the root path /. You can use this to render a custom homepage.
  • app/robots.ts this is the robots.txt file that will be served at /robots.txt
  • app/seo.tsx this is the component that will be used to render the SEO tags for each page. You can add custom SEO tags here.
  • app/sitemap.ts this is the sitemap.xml file that will be served at /sitemap.xml
  • app/theme-providers.tsx this component used next-themes to wrap the entire app in a theme provider. You can add custom theme providers here. Read more on next-themes

You can modify the default og:image by changing the jsx in `app/api/og/route.tsx`