Veryfront Logo

App Component

What’s the App Component?  

The App Component sits at the top of an app’s component hierarchy and wraps around the Layout and Page components. It’s a great place to define app-wide configuration for the HTML head element and import external styles and third-party scripts.

Component Hierarchy

At its core, the App Component is just a regular component. However, a project can only have one App Component, and it must include props.children to render the enclosed Layout and page components.

<Head>
  <meta name="description" content="This is a sample page." />
</Head>

<>{props.children}</>

You can define your project’s App Component in the Provider Settings, which you can access via the Sidebar.

Provider Settings App Component Selector

Create a New App Component  

Open the Components menu in the Sidebar and click the plus icon in the top right corner to create a new component.

Components Menu New Component

Enter the component name and slug and confirm by clicking “Create Component”.

Create Component Overlay

You can now edit your App Component and set it as the new default for the project.

Edit the App Component  

Use the App Component to:

  • define the HTML head and import external styles and third-party scripts
  • declare page metadata
  • wrap your app's content with provider components, such as an authentication layer

Note: The App Component must contain props.children to render the enclosed Layout and page components.

Here is how an App Component could look like:

<Head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  <meta name="description" content="This is a sample page." />
  <meta property="og:image:width" content="800" />
  <meta property="og:image:height" content="800" />
  <meta property="og:image" content="https://via.placeholder.com/800" />
</Head>

<>{props.children}</>

Use the App Component  

Veryfront already creates and sets a default App Component when you create a new project.

To specify a different App Component as the default, open the Provider Settings in the Sidebar and enter the new name in the “App” input field.

Provider Settings App Component Selector

Next Steps  

We recommend you learn more about:

  • MDX Content
  • Layout Components
  • Context
<  Creating ComponentsLayout Components  >
Veryfront Logo

GDPR
COMPLIANT


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront