Vue.js: What is the difference between pages and layouts in Nuxt 3?

1<!-- pages/index.vue -->
2<template>
3    <div>Home page content</div>
4</template>

1<!-- layouts/default.vue -->
2<template>
3    <div class="layout">
4        <Header />
5        <slot />
6        <Footer />
7    </div>
8</template>
9
10<!-- pages/about.vue -->
11<script setup>
12definePageMeta({ layout: "custom" })
13</script>