From 99e04f2ca3a9fb8c30c197712ca33637446955b4 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Wed, 26 Jul 2023 14:51:37 +1000
Subject: [PATCH 1/8] feat: remove v1 meta API

---
 .changeset/remove-v1-meta.md                  |  50 +++
 docs/api/conventions.md                       |   2 +-
 docs/file-conventions/root.md                 |  17 +-
 docs/guides/constraints.md                    |  10 +-
 docs/guides/mdx.md                            |  15 +-
 docs/guides/migrating-react-router-app.md     |  32 +-
 docs/guides/styling.md                        |  11 +-
 docs/route/meta-v2.md                         | 256 +-----------
 docs/route/meta.md                            | 282 +++++++++----
 docs/tutorials/jokes.md                       |  36 +-
 integration/defer-test.ts                     |  20 +-
 integration/hmr-log-test.ts                   |   2 -
 integration/hmr-test.ts                       |   2 -
 integration/link-test.ts                      |  22 +-
 integration/mdx-test.ts                       |   5 +-
 integration/meta-test.ts                      | 385 ------------------
 packages/remix-cloudflare/index.ts            |  11 +-
 packages/remix-deno/index.ts                  |  11 +-
 .../fixtures/cloudflare/app/root.tsx          |   9 +-
 .../__tests__/fixtures/deno/app/root.tsx      |   9 +-
 .../fixtures/deno/app/routes/index.tsx        |   5 +
 .../fixtures/indie-stack/app/root.tsx         |   9 +-
 .../fixtures/indie-stack/app/routes/index.tsx |   6 +
 .../__tests__/fixtures/node/app/root.tsx      |   9 +-
 .../fixtures/node/app/routes/index.tsx        |   6 +
 .../remix-dev/__tests__/readConfig-test.ts    |   2 -
 packages/remix-dev/config.ts                  |  12 -
 packages/remix-node/index.ts                  |  11 +-
 .../remix-react/__tests__/components-test.tsx |   1 -
 .../__tests__/scroll-restoration-test.tsx     |   1 -
 packages/remix-react/components.tsx           | 160 +-------
 packages/remix-react/entry.ts                 |   1 -
 packages/remix-react/index.tsx                |   7 +-
 packages/remix-react/routeModules.ts          |  71 +---
 .../__tests__/handler-test.ts                 |   4 +-
 packages/remix-server-runtime/entry.ts        |   1 -
 packages/remix-server-runtime/index.ts        |   9 +-
 packages/remix-server-runtime/reexport.ts     |   9 +-
 packages/remix-server-runtime/routeModules.ts |  96 ++---
 packages/remix-testing/create-remix-stub.tsx  |   1 -
 .../playground/template/app/routes/index.tsx  |  12 +-
 .../playground/template/app/routes/join.tsx   |  16 +-
 .../playground/template/app/routes/login.tsx  |  20 +-
 .../playground/template/app/routes/notes.tsx  |  12 +-
 .../template/app/routes/notes/$noteId.tsx     |   6 +-
 .../template/app/routes/notes/index.tsx       |   4 +-
 .../template/app/routes/notes/new.tsx         |  14 +-
 scripts/playground/template/remix.config.js   |   3 -
 templates/arc/app/routes/_index.tsx           |   4 +-
 templates/arc/remix.config.js                 |   1 -
 .../cloudflare-pages/app/routes/_index.tsx    |   4 +-
 templates/cloudflare-pages/remix.config.js    |   1 -
 .../cloudflare-workers/app/routes/_index.tsx  |   4 +-
 templates/cloudflare-workers/remix.config.js  |   1 -
 templates/deno/app/routes/_index.tsx          |   4 +-
 templates/deno/remix.config.js                |   1 -
 templates/express/app/routes/_index.tsx       |   4 +-
 templates/express/remix.config.js             |   1 -
 templates/fly/app/routes/_index.tsx           |   4 +-
 templates/fly/remix.config.js                 |   1 -
 templates/netlify/app/routes/_index.tsx       |   4 +-
 templates/netlify/remix.config.js             |   1 -
 templates/remix-javascript/remix.config.js    |   1 -
 templates/remix/app/routes/_index.tsx         |   4 +-
 templates/remix/remix.config.js               |   1 -
 templates/vercel/app/routes/_index.tsx        |   4 +-
 templates/vercel/remix.config.js              |   1 -
 67 files changed, 480 insertions(+), 1261 deletions(-)
 create mode 100644 .changeset/remove-v1-meta.md

diff --git a/.changeset/remove-v1-meta.md b/.changeset/remove-v1-meta.md
new file mode 100644
index 00000000000..2896e4c2d31
--- /dev/null
+++ b/.changeset/remove-v1-meta.md
@@ -0,0 +1,50 @@
+---
+"remix": major
+"@remix-run/cloudflare": major
+"@remix-run/deno": major
+"@remix-run/dev": major
+"@remix-run/node": major
+"@remix-run/react": major
+"@remix-run/server-runtime": major
+"@remix-run/testing": major
+---
+
+We have made a few important changes to the route `meta` API as reflected in the v1 implementation when using the `future.v2_meta` config option.
+
+- The `meta` function should no longer return an object, but an array of objects that map to the HTML tag's respective attributes. This provides more flexibility and control over how certain tags are rendered, and the order in which they appear.
+- In most cases, `meta` descriptor objects render a `<meta>` tag. There are a few notable exceptions:
+  - `{ title: "My app" }` will render `<title>My app</title>`.
+  - `{ 'script:ld+json': { /* ... */ } }` will render `<script type="application/ld+json">/* ... */</script>`, where the value is serialized to JSON and rendered inside the `<script>` tag.
+  - `{ tagName: 'link', ...attributes }` will render `<link {...attributes} />`
+    - This is useful for things like setting canonical URLs. For loading assets, we encourage you to use the `links` export instead.
+    - It's important to note that `tagName` may only accept `meta` or `link`, so other arbitrary elements will be ignored.
+- `<Meta />` will no longer render the `meta` output from the entire route hierarchy. Only the output from the leaf (current) route will be rendered unless that route does not export a `meta` function, in which case the output from the nearest ancestor route with `meta` will be rendered.
+  - This change comes from user feedback that auto-merging meta made effective SEO difficult to implement. Our goal is to give you as much control as you need over meta tags for each individual route.
+  - Our suggested approach is to **only export a `meta` function from leaf route modules**. However, if you do want to render a tag from another matched route, `meta` now accepts a `matches` argument for you to merge or override parent route meta as you'd like.
+  ```tsx
+  export function meta({ matches }) {
+    return [
+      // render all ancestor route meta except for title tags
+      ...matches
+        .flatMap((match) => match.meta)
+        .filter((match) => !("title" in match)),
+      { title: "Override the title!" },
+    ];
+  }
+  ```
+- The `parentsData` argument has been removed. If you need to access data from a parent route, you can use `matches` instead.
+  ```tsx
+  // before
+  export function meta({ parentsData }) {
+    return [{ title: parentsData["routes/some-route"].title }];
+  }
+  // after
+  export function meta({ matches }) {
+    return [
+      {
+        title: matches.find((match) => match.id === "routes/some-route").data
+          .title,
+      },
+    ];
+  }
+  ```
diff --git a/docs/api/conventions.md b/docs/api/conventions.md
index a0dc6a1c001..2a6c4e42abb 100644
--- a/docs/api/conventions.md
+++ b/docs/api/conventions.md
@@ -154,7 +154,7 @@ title: Conventions
 
 [Moved →][moved-36]
 
-#### `HtmlMetaDescriptor`
+#### `MetaDescriptor`
 
 [Moved →][moved-37]
 
diff --git a/docs/file-conventions/root.md b/docs/file-conventions/root.md
index 2992e30e98a..54293257129 100644
--- a/docs/file-conventions/root.md
+++ b/docs/file-conventions/root.md
@@ -10,10 +10,7 @@ FIXME: This is mostly the wrong doc, right code.
 These components are to be used once inside your root route (`root.tsx`). They include everything Remix figured out or built in order for your page to render properly.
 
 ```tsx
-import type {
-  LinksFunction,
-  MetaFunction,
-} from "@remix-run/node"; // or cloudflare/deno
+import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
 import {
   Links,
   LiveReload,
@@ -29,16 +26,16 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: globalStylesheetUrl }];
 };
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "My Amazing App",
-  viewport: "width=device-width, initial-scale=1",
-});
-
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+
         {/* All meta exports on all routes will go here */}
         <Meta />
 
diff --git a/docs/guides/constraints.md b/docs/guides/constraints.md
index c3f5bf5204d..024df51c144 100644
--- a/docs/guides/constraints.md
+++ b/docs/guides/constraints.md
@@ -30,7 +30,7 @@ export async function loader() {
 }
 
 export function meta() {
-  return { title: "Posts" };
+  return [{ title: "Posts" }];
 }
 
 export default function Posts() {
@@ -55,7 +55,7 @@ import { useLoaderData } from "@remix-run/react";
 import PostsView from "../PostsView";
 
 export function meta() {
-  return { title: "Posts" };
+  return [{ title: "Posts" }];
 }
 
 export default function Posts() {
@@ -90,7 +90,7 @@ export async function loader() {
 }
 
 export function meta() {
-  return { title: "Posts" };
+  return [{ title: "Posts" }];
 }
 
 export default function Posts() {
@@ -110,7 +110,7 @@ import PostsView from "../PostsView";
 console.log(prisma); //🥶
 
 export function meta() {
-  return { title: "Posts" };
+  return [{ title: "Posts" }];
 }
 
 export default function Posts() {
@@ -136,7 +136,7 @@ export async function loader() {
 }
 
 export function meta() {
-  return { title: "Posts" };
+  return [{ title: "Posts" }];
 }
 
 export default function Posts() {
diff --git a/docs/guides/mdx.md b/docs/guides/mdx.md
index 0e7621c89f4..8522a79cc31 100644
--- a/docs/guides/mdx.md
+++ b/docs/guides/mdx.md
@@ -23,8 +23,9 @@ MDX routes allow you to define both meta and headers as if they were a code base
 ```md
 ---
 meta:
-  title: My First Post
-  description: Isn't this awesome?
+  - title: My First Post
+  - name: description
+    content: Isn't this awesome?
 headers:
   Cache-Control: no-cache
 ---
@@ -56,8 +57,9 @@ By creating a `app/routes/posts/first-post.mdx` we can start writing a blog post
 ```mdx
 ---
 meta:
-  title: My First Post
-  description: Isn't this just awesome?
+  - title: My First Post
+  - name: description
+    content: Isn't this just awesome?
 ---
 
 # Example Markdown Post
@@ -72,8 +74,9 @@ You can even export all the other things in this module that you can in regular
 ```mdx
 ---
 meta:
-  title: My First Post
-  description: Isn't this awesome?
+  - title: My First Post
+  - name: description
+    content: Isn't this awesome?
 
 headers:
   Cache-Control: no-cache
diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md
index 13d2d72aeb8..e81570df818 100644
--- a/docs/guides/migrating-react-router-app.md
+++ b/docs/guides/migrating-react-router-app.md
@@ -653,35 +653,13 @@ export const links: LinksFunction = () => {
 
 Just as a `<link>` is rendered inside your route component and ultimately rendered in your root `<Links />` component, your app may use some injection trickery to render additional components in the document `<head>`. Often this is done to change the document's `<title>` or `<meta>` tags.
 
-Similar to `links`, each route can also export a `meta` function that—you guessed it—returns a value responsible for rendering `<meta>` tags for that route. This is useful because each route often has its own.
-
-The API is slightly different for `meta`. Instead of an array, it returns an object where the keys represent the meta `name` attribute (or `property` in the case of OpenGraph tags) and the value is the `content` attribute. The object can also accept a `title` property that renders a `<title />` component specifically for that route.
-
-```tsx filename=app/routes/about.tsx lines=[1,3-12]
-import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno
-
-export const meta: MetaFunction = () => {
-  return {
-    title: "About Us",
-    "og:title": "About Us",
-    description: "Doin hoodrat stuff with our friends",
-    "og:description": "Doin hoodrat stuff with our friends",
-    "og:image:url": "https://remix.run/og-image.png",
-    "og:image:alt": "Just doin a bunch of hoodrat stuff",
-  };
-};
+Similar to `links`, each route can also export a `meta` function that returns values responsible for rendering `<meta>` tags for that route (as well as a few other tags relevant for metadata, such as `<title>`, `<link rel="canonical">` and `<script type="application/ld+json">`).
 
-export default function About() {
-  return (
-    <main>
-      <h1>About us</h1>
-      <PageContent />
-    </main>
-  );
-}
-```
+The behavior for `meta` is slightly different from `links`. Instead of merging values from other `meta` functions in the route hierarchy, **each leaf route is responsible for rendering its own tags**. This is because:
 
-Again—no more weird dances to get meta into your routes from deep in the component tree. Export them at the route level and let the server handle it. ✨
+- You often want more fine-grained control over metadata for optimal SEO
+- In the case of some tags that follow the [Open Graph protocol](https://ogp.me/), the ordering of some tags impacts their how they are interpreted by crawlers and social media sites, and its it's less predictable for Remix to assume how complex metadata should be merged
+- Some tags allow for multiple values while others do not, and Remix shouldn't assume how you want to handle all of those cases
 
 ### Updating imports
 
diff --git a/docs/guides/styling.md b/docs/guides/styling.md
index cf1dd70ddfa..c24213e7b2e 100644
--- a/docs/guides/styling.md
+++ b/docs/guides/styling.md
@@ -581,7 +581,6 @@ Here's some sample code to show how you might use Styled Components with Remix (
 1. First you'll need to put a placeholder in your root component to control where the styles are inserted.
 
    ```tsx filename=app/root.tsx lines=[22-24]
-   import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno
    import {
      Links,
      LiveReload,
@@ -591,15 +590,15 @@ Here's some sample code to show how you might use Styled Components with Remix (
      ScrollRestoration,
    } from "@remix-run/react";
 
-   export const meta: MetaFunction = () => ({
-     charset: "utf-8",
-     viewport: "width=device-width, initial-scale=1",
-   });
-
    export default function App() {
      return (
        <html lang="en">
          <head>
+           <meta charSet="utf-8" />
+           <meta
+             name="viewport"
+             content="width=device-width, initial-scale=1"
+           />
            <Meta />
            <Links />
            {typeof document === "undefined"
diff --git a/docs/route/meta-v2.md b/docs/route/meta-v2.md
index 1fd24470f2a..0e530061cbb 100644
--- a/docs/route/meta-v2.md
+++ b/docs/route/meta-v2.md
@@ -1,259 +1,11 @@
 ---
 title: meta (v2)
-new: true
+toc: false
+hidden: true
 ---
 
 # `meta` (v2)
 
-You can opt-in to the new meta API with a future flag in Remix config.
+[The v2 meta API has now been stabilized.][moved]
 
-```js filename=remix.config.js
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  future: {
-    v2_meta: true,
-  },
-};
-```
-
-The `meta` export allows you to add metadata HTML tags for every route in your app. These tags are important for things like search engine optimization (SEO) and browser directives for determining certain behaviors. They can also be used by social media sites to display rich previews of your app.
-
-The `meta` function should return an array of `V2_MetaDescriptor` objects. These objects map one-to-one with HTML tags. So this meta function:
-
-```tsx
-export const meta: V2_MetaFunction = () => {
-  return [
-    { title: "Very cool app | Remix" },
-    {
-      property: "og:title",
-      content: "Very cool app",
-    },
-    {
-      name: "description",
-      content: "This app is the best",
-    },
-  ];
-};
-```
-
-produces this HTML:
-
-```html
-<title>Very cool app | Remix</title>
-<meta property="og:title" content="Very cool app" />;
-<meta name="description" content="This app is the best" />
-```
-
-By default, meta descriptors will render a `<meta>` tag in most cases. The two exceptions are:
-
-- `{ title }` renders a `<title>` tag
-- `{ "script:ld+json" }` renders a `<script type="application/ld+json">` tag, and its value should be a serializable object that is stringified and injected into the tag.
-
-```tsx
-export const meta: V2_MetaFunction = () => {
-  return [
-    {
-      "script:ld+json": {
-        "@context": "https://schema.org",
-        "@type": "Organization",
-        name: "Remix",
-        url: "https://remix.run",
-      },
-    },
-  ];
-};
-```
-
-A meta descriptor can also render a `<link>` tag by setting the `tagName` property to `"link"`. This is useful for `<link>` tags associated with SEO like `canonical` URLs. For asset links like stylesheets and favicons, you should use the [`links` export][links-export] instead.
-
-```tsx
-export const meta: V2_MetaFunction = () => {
-  return [
-    {
-      tagName: "link",
-      rel: "canonical",
-      href: "https://remix.run",
-    },
-  ];
-};
-```
-
-## `meta` Function Parameters
-
-### `location`
-
-This is the current router `Location` object. This is useful for generating tags for routes at specific paths or query parameters.
-
-```tsx
-export const meta: V2_MetaFunction = ({ location }) => {
-  const searchQuery = new URLSearchParams(
-    location.search
-  ).get("q");
-  return [{ title: `Search results for "${searchQuery}"` }];
-};
-```
-
-### `matches`
-
-This is an array of the current route matches. You have access to many things, particularly the meta from the parent matches and data.
-
-The interface for `matches` is similar to the return value of [`useMatches`][use-matches], but each match will include the output of its `meta` function. This is useful for [merging metadata across the route hierarchy][merging-metadata-across-the-route-hierarchy].
-
-### `data`
-
-This is the data from your route's loader.
-
-```tsx
-export async function loader({ params }: LoaderArgs) {
-  return json({
-    task: await getTask(params.projectId, params.taskId),
-  });
-}
-
-export const meta: V2_MetaFunction<typeof loader> = ({
-  data,
-}) => {
-  return [{ title: data.task.name }];
-};
-```
-
-### `params`
-
-The route's URL params. See [Dynamic Segments in the Routing Guide][url-params].
-
-## Accessing Data from Parent Route Loaders
-
-In addition to the current route's data, often you'll want to access data from a route higher up in the route hierarchy. You can look it up by its route ID in `matches`.
-
-```tsx filename=routes/project/$pid/tasks/$tid.tsx
-import type { loader as projectDetailsLoader } from "../../../$pid";
-
-export async function loader({ params }: LoaderArgs) {
-  return json({ task: await getTask(params.tid) });
-}
-
-export const meta: V2_MetaFunction<
-  typeof loader,
-  { "routes/project/$pid": typeof projectDetailsLoader }
-> = ({ data, matches }) => {
-  const project = matches.find(
-    (match) => match.id === "routes/project/$pid"
-  ).project;
-  const task = data.task;
-  return [{ title: `${project.name}: ${task.name}` }];
-};
-```
-
-## Gotchas with `meta` and Nested Routes
-
-Because multiple nested routes render at the same time, there is some merging that needs to happen to determine the meta tags that ultimately render. Remix gives you complete control over this merge because there is no obvious default.
-
-Remix will take the last matching route with a meta export and use that. This allows you to override things like `title`, remove things like `og:image` that the parent route added, or keep everything from the parent and add new meta for the child route.
-
-This can get quite tricky when you're new.
-
-Consider a route like `/projects/123`, there are likely three matching routes: `root.tsx`, `projects.tsx`, and `projects/$id.tsx`. All three may export meta descriptors.
-
-```tsx bad filename=app/root.tsx
-export const meta: V2_MetaFunction = () => {
-  return [
-    {
-      name: "viewport",
-      content: "width=device-width,initial-scale=1",
-    },
-    { title: "New Remix App" },
-  ];
-};
-```
-
-```tsx bad filename=app/routes/projects.tsx
-export const meta: V2_MetaFunction = () => {
-  return [{ title: "Projects" }];
-};
-```
-
-```tsx bad filename=app/routes/projects/$id.tsx
-export const meta: V2_MetaFunction<typeof loader> = ({
-  data,
-}) => {
-  return [{ title: data.project.name }];
-};
-```
-
-With this code, we will lose the `viewport` meta tag at `/projects` and `/projects/123` because only the last meta is used and the code doesn't merge with the parent.
-
-### Global `meta`
-
-Nearly every app will have global meta like the `viewport` and `charSet`. We recommend using normal `<meta>` tags inside of the [root route][root-route] instead of the `meta` export so you simply don't have to deal with merging:
-
-```tsx filename=app/root.tsx lines=[12-16]
-import {
-  Meta,
-  Links,
-  Scripts,
-  Outlet,
-} from "@remix-run/react";
-
-export default function Root() {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1"
-        />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Outlet />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-```
-
-### Avoid `meta` in Parent Routes
-
-You can also avoid the merge problem by simply not exporting meta that you want to override from parent routes. Instead of defining meta on the parent route, use the [index route][index-route]. This way you can avoid complex merge logic for things like the title. Otherwise you will need to find the parent title descriptor and replace it with the child's title. It's much easier to simply not need to override by using index routes.
-
-### Merging with Parent `meta`
-
-Usually you only need to add meta to what the parent has already defined. You can merge parent meta with the spread operator and the [`matches`][matches] arg:
-
-```tsx
-export const meta: V2_MetaFunction = ({ matches }) => {
-  const parentMeta = matches.flatMap(
-    (match) => match.meta ?? []
-  );
-  return [...parentMeta, { title: "Projects" }];
-};
-```
-
-Note that this _will not_ override something like `title`. This is only additive. If the inherited route meta includes a `title` tag, you can override with `Array.prototype.filter`:
-
-```tsx
-export const meta: V2_MetaFunction = ({ matches }) => {
-  const parentMeta = matches
-    .flatMap((match) => match.meta ?? [])
-    .filter((meta) => !("title" in meta));
-  return [...parentMeta, { title: "Projects" }];
-};
-```
-
-### `meta` Merging helper
-
-If you can't avoid the merge problem with global meta or index routes, we've created a helper that you can put in your app that can override and append to parent meta easily.
-
-- [View Gist for `merge-meta.ts`][merge-meta]
-
-[links-export]: ./links
-[use-matches]: ../hooks/use-matches
-[merging-metadata-across-the-route-hierarchy]: #merging-with-parent-meta
-[url-params]: ../guides/routing#dynamic-segments
-[root-route]: ../file-conventions/root
-[index-route]: ../guides/routing#index-routes
-[matches]: #matches
-[merge-meta]: https://gist.github.com/ryanflorence/ec1849c6d690cfbffcb408ecd633e069
+[moved]: ./meta
diff --git a/docs/route/meta.md b/docs/route/meta.md
index 59a32e55812..ad8a6b4b73e 100644
--- a/docs/route/meta.md
+++ b/docs/route/meta.md
@@ -1,134 +1,248 @@
 ---
 title: meta
+new: true
 ---
 
 # `meta`
 
-<docs-warning>The route `meta` export signature is changing in v2. You can prepare for this change at your convenience with the `v2_meta` future flag. For instructions on making this change see the [v2 guide][v2guide].</docs-warning>
-
 The `meta` export allows you to add metadata HTML tags for every route in your app. These tags are important for things like search engine optimization (SEO) and browser directives for determining certain behaviors. They can also be used by social media sites to display rich previews of your app.
 
-The meta export will set meta tags for your html document. We highly recommend setting the title and description on every route aside from layout routes, as a layout's index route will set the meta for the index path.
+The `meta` function should return an array of `MetaDescriptor` objects. These objects map one-to-one with HTML tags. So this meta function:
 
 ```tsx
-import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno
-
 export const meta: MetaFunction = () => {
-  return {
-    title: "Something cool",
-    description:
-      "This becomes the nice preview on search results.",
-  };
+  return [
+    { title: "Very cool app | Remix" },
+    {
+      property: "og:title",
+      content: "Very cool app",
+    },
+    {
+      name: "description",
+      content: "This app is the best",
+    },
+  ];
 };
 ```
 
-<docs-warning>The `meta` function _may_ run on the server (e.g. the initial page load) or the client (e.g. a client navigation), so you cannot access server-specific data like `process.env.NODE_ENV` directly. If you need server-side data in `meta`, get the data in the `loader` and access it via the `meta` function's `data` parameter.</docs-warning>
+produces this HTML:
 
-There are a few special cases (read about those below). In the case of nested routes, the meta tags are merged automatically, so parent routes can add meta tags without the child routes needing to copy them.
+```html
+<title>Very cool app | Remix</title>
+<meta property="og:title" content="Very cool app" />;
+<meta name="description" content="This app is the best" />
+```
 
-## `HtmlMetaDescriptor`
+By default, meta descriptors will render a `<meta>` tag in most cases. The two exceptions are:
 
-This is an object representation and abstraction of a `<meta {...props}>` element and its attributes. [View the MDN docs for the meta API][mdn-meta].
+- `{ title }` renders a `<title>` tag
+- `{ "script:ld+json" }` renders a `<script type="application/ld+json">` tag, and its value should be a serializable object that is stringified and injected into the tag.
 
-The `meta` export from a route should return a single `HtmlMetaDescriptor` object.
+```tsx
+export const meta: MetaFunction = () => {
+  return [
+    {
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        name: "Remix",
+        url: "https://remix.run",
+      },
+    },
+  ];
+};
+```
 
-Almost every `meta` element takes a `name` and `content` attribute, with the exception of [OpenGraph tags][open-graph-tags] which use `property` instead of `name`. In either case, the attributes represent a key/value pair for each tag. Each pair in the `HtmlMetaDescriptor` object represents a separate `meta` element, and Remix maps each to the correct attributes for that tag.
+A meta descriptor can also render a `<link>` tag by setting the `tagName` property to `"link"`. This is useful for `<link>` tags associated with SEO like `canonical` URLs. For asset links like stylesheets and favicons, you should use the [`links` export][links-export] instead.
 
-The `meta` object can also hold a `title` reference which maps to the [HTML `<title>` element][html-title-element].
+```tsx
+export const meta: MetaFunction = () => {
+  return [
+    {
+      tagName: "link",
+      rel: "canonical",
+      href: "https://remix.run",
+    },
+  ];
+};
+```
 
-As a convenience, `charset: "utf-8"` will render a `<meta charset="utf-8">`.
+## `meta` Function Parameters
 
-As a last option, you can also pass an object of attribute/value pairs as the value. This can be used as an escape-hatch for meta tags like the [`http-equiv` tag][http-equiv-tag] which uses `http-equiv` instead of `name`.
+### `location`
 
-Examples:
+This is the current router `Location` object. This is useful for generating tags for routes at specific paths or query parameters.
 
 ```tsx
-import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno
-
-export const meta: MetaFunction = () => ({
-  // Special cases
-  charset: "utf-8", // <meta charset="utf-8">
-  "og:image": "https://josiesshakeshack.com/logo.jpg", // <meta property="og:image" content="https://josiesshakeshack.com/logo.jpg">
-  title: "Josie's Shake Shack", // <title>Josie's Shake Shack</title>
-
-  // name => content
-  description: "Delicious shakes", // <meta name="description" content="Delicious shakes">
-  viewport: "width=device-width, initial-scale=1", // <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  // <meta {...value}>
-  refresh: {
-    httpEquiv: "refresh",
-    content: "3;url=https://www.mozilla.org",
-  }, // <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
-});
+export const meta: MetaFunction = ({ location }) => {
+  const searchQuery = new URLSearchParams(
+    location.search
+  ).get("q");
+  return [{ title: `Search results for "${searchQuery}"` }];
+};
 ```
 
-## Page context in `meta` function
+### `matches`
 
-`meta` function is passed an object that has following data:
+This is an array of the current route matches. You have access to many things, particularly the meta from the parent matches and data.
 
-- `data` is whatever exported by `loader` function
-- `location` is a `window.location`-like object that has some data about the current route
-- `params` is an object containing route params
-- `parentsData` is a hashmap of all the data exported by `loader` functions of current route and all of its parents
+The interface for `matches` is similar to the return value of [`useMatches`][use-matches], but each match will include the output of its `meta` function. This is useful for [merging metadata across the route hierarchy][merging-metadata-across-the-route-hierarchy].
+
+### `data`
+
+This is the data from your route's loader.
 
 ```tsx
+export async function loader({ params }: LoaderArgs) {
+  return json({
+    task: await getTask(params.projectId, params.taskId),
+  });
+}
+
 export const meta: MetaFunction<typeof loader> = ({
   data,
-  params,
 }) => {
-  if (!data) {
-    return {
-      title: "Missing Shake",
-      description: `There is no shake with the ID of ${params.shakeId}. 😢`,
-    };
-  }
-
-  const { shake } = data;
-  return {
-    title: `${shake.name} milkshake`,
-    description: shake.summary,
-  };
+  return [{ title: data.task.name }];
 };
 ```
 
-To infer types for `parentsData`, provide a mapping from the route's file path (relative to `app/`) to that route loader type:
+### `params`
+
+The route's URL params. See [Dynamic Segments in the Routing Guide][url-params].
 
-```tsx filename=app/routes/sales.tsx
-export const loader = async () => {
-  return json({ salesCount: 1074 });
+## Accessing Data from Parent Route Loaders
+
+In addition to the current route's data, often you'll want to access data from a route higher up in the route hierarchy. You can look it up by its route ID in `matches`.
+
+```tsx filename=routes/project/$pid/tasks/$tid.tsx
+import type { loader as projectDetailsLoader } from "../../../$pid";
+
+export async function loader({ params }: LoaderArgs) {
+  return json({ task: await getTask(params.tid) });
+}
+
+export const meta: MetaFunction<
+  typeof loader,
+  { "routes/project/$pid": typeof projectDetailsLoader }
+> = ({ data, matches }) => {
+  const project = matches.find(
+    (match) => match.id === "routes/project/$pid"
+  ).project;
+  const task = data.task;
+  return [{ title: `${project.name}: ${task.name}` }];
 };
 ```
 
-```tsx
-import type { loader as salesLoader } from "../../sales";
+## Gotchas with `meta` and Nested Routes
+
+Because multiple nested routes render at the same time, there is some merging that needs to happen to determine the meta tags that ultimately render. Remix gives you complete control over this merge because there is no obvious default.
+
+Remix will take the last matching route with a meta export and use that. This allows you to override things like `title`, remove things like `og:image` that the parent route added, or keep everything from the parent and add new meta for the child route.
 
-export const loader = async () => {
-  return json({ name: "Customer name" });
+This can get quite tricky when you're new.
+
+Consider a route like `/projects/123`, there are likely three matching routes: `root.tsx`, `projects.tsx`, and `projects/$id.tsx`. All three may export meta descriptors.
+
+```tsx bad filename=app/root.tsx
+export const meta: MetaFunction = () => {
+  return [
+    {
+      name: "viewport",
+      content: "width=device-width,initial-scale=1",
+    },
+    { title: "New Remix App" },
+  ];
 };
+```
 
-const meta: MetaFunction<
-  typeof loader,
-  { "routes/sales": typeof salesLoader }
-> = ({ data, parentsData }) => {
-  const { name } = data;
-  //      ^? string
-  const { salesCount } = parentsData["routes/sales"];
-  //      ^? number
+```tsx bad filename=app/routes/projects.tsx
+export const meta: MetaFunction = () => {
+  return [{ title: "Projects" }];
+};
+```
+
+```tsx bad filename=app/routes/projects/$id.tsx
+export const meta: MetaFunction<typeof loader> = ({
+  data,
+}) => {
+  return [{ title: data.project.name }];
+};
+```
+
+With this code, we will lose the `viewport` meta tag at `/projects` and `/projects/123` because only the last meta is used and the code doesn't merge with the parent.
+
+### Global `meta`
+
+Nearly every app will have global meta like the `viewport` and `charSet`. We recommend using normal `<meta>` tags inside of the [root route][root-route] instead of the `meta` export so you simply don't have to deal with merging:
+
+```tsx filename=app/root.tsx lines=[12-16]
+import {
+  Meta,
+  Links,
+  Scripts,
+  Outlet,
+} from "@remix-run/react";
+
+export default function Root() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1"
+        />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+### Avoid `meta` in Parent Routes
+
+You can also avoid the merge problem by simply not exporting meta that you want to override from parent routes. Instead of defining meta on the parent route, use the [index route][index-route]. This way you can avoid complex merge logic for things like the title. Otherwise you will need to find the parent title descriptor and replace it with the child's title. It's much easier to simply not need to override by using index routes.
+
+### Merging with Parent `meta`
+
+Usually you only need to add meta to what the parent has already defined. You can merge parent meta with the spread operator and the [`matches`][matches] arg:
+
+```tsx
+export const meta: MetaFunction = ({ matches }) => {
+  const parentMeta = matches.flatMap(
+    (match) => match.meta ?? []
+  );
+  return [...parentMeta, { title: "Projects" }];
 };
 ```
 
-[mdn-meta]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
-[open-graph-tags]: https://ogp.me
-[html-title-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
-[http-equiv-tag]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv
-[meta-v2]: #metav2
+Note that this _will not_ override something like `title`. This is only additive. If the inherited route meta includes a `title` tag, you can override with `Array.prototype.filter`:
+
+```tsx
+export const meta: MetaFunction = ({ matches }) => {
+  const parentMeta = matches
+    .flatMap((match) => match.meta ?? [])
+    .filter((meta) => !("title" in meta));
+  return [...parentMeta, { title: "Projects" }];
+};
+```
+
+### `meta` Merging helper
+
+If you can't avoid the merge problem with global meta or index routes, we've created a helper that you can put in your app that can override and append to parent meta easily.
+
+- [View Gist for `merge-meta.ts`][merge-meta]
+
+[links-export]: ./links
+[use-matches]: ../hooks/use-matches
+[merging-metadata-across-the-route-hierarchy]: #merging-with-parent-meta
+[url-params]: ../guides/routing#dynamic-segments
 [root-route]: ../file-conventions/root
-[matches]: #matches
 [index-route]: ../guides/routing#index-routes
+[matches]: #matches
 [merge-meta]: https://gist.github.com/ryanflorence/ec1849c6d690cfbffcb408ecd633e069
-[url-params]: ../guides/routing#dynamic-segments
-[use-matches]: ../hooks/use-matches
-[merging-metadata-across-the-route-hierarchy]: #md-merging-with-parent-meta
-[links-export]: ./links
-[v2guide]: ../pages/v2#route-meta
diff --git a/docs/tutorials/jokes.md b/docs/tutorials/jokes.md
index d23f77a3fc9..eee84adecc1 100644
--- a/docs/tutorials/jokes.md
+++ b/docs/tutorials/jokes.md
@@ -4895,7 +4895,7 @@ But before you get started, remember that we're in charge of rendering everythin
 ```tsx filename=app/root.tsx lines=[3,9,33-42,46,56-69]
 import type {
   LinksFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   isRouteErrorResponse,
@@ -4925,7 +4925,7 @@ export const links: LinksFunction = () => [
   },
 ];
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const description =
     "Learn Remix and laugh at the same time!";
 
@@ -5022,7 +5022,7 @@ export function ErrorBoundary() {
 import type {
   ActionArgs,
   LinksFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   Link,
@@ -5043,7 +5043,7 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesUrl },
 ];
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const description =
     "Login to submit your own jokes to Remix Jokes!";
 
@@ -5289,7 +5289,7 @@ export default function Login() {
 import type {
   ActionArgs,
   LoaderArgs,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import {
@@ -5306,7 +5306,7 @@ import {
   requireUserId,
 } from "~/utils/session.server";
 
-export const meta: V2_MetaFunction<typeof loader> = ({
+export const meta: MetaFunction<typeof loader> = ({
   data,
 }) => {
   const { description, title } = data
@@ -5714,7 +5714,7 @@ Ok, so let's load JavaScript on this page now 😆
 ```tsx filename=app/root.tsx lines=[11,75]
 import type {
   LinksFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   isRouteErrorResponse,
@@ -5745,7 +5745,7 @@ export const links: LinksFunction = () => [
   },
 ];
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const description =
     "Learn Remix and laugh at the same time!";
 
@@ -5846,7 +5846,7 @@ export function ErrorBoundary() {
 ```tsx filename=app/root.tsx lines=[92]
 import type {
   LinksFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   isRouteErrorResponse,
@@ -5877,7 +5877,7 @@ export const links: LinksFunction = () => [
   },
 ];
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const description =
     "Learn Remix and laugh at the same time!";
 
@@ -5976,7 +5976,7 @@ export function ErrorBoundary() {
 import type {
   ActionArgs,
   LoaderArgs,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import {
@@ -5993,7 +5993,7 @@ import {
   requireUserId,
 } from "~/utils/session.server";
 
-export const meta: V2_MetaFunction<typeof loader> = ({
+export const meta: MetaFunction<typeof loader> = ({
   data,
 }) => {
   const { description, title } = data
@@ -6386,7 +6386,7 @@ Remix has its own [`<Form />`][form] component. When JavaScript is not yet loade
 import type {
   ActionArgs,
   LinksFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import {
   Form,
@@ -6408,7 +6408,7 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesUrl },
 ];
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   const description =
     "Login to submit your own jokes to Remix Jokes!";
 
@@ -6756,7 +6756,7 @@ export default function JokesRoute() {
 import type {
   ActionArgs,
   LoaderArgs,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import {
@@ -6774,7 +6774,7 @@ import {
   requireUserId,
 } from "~/utils/session.server";
 
-export const meta: V2_MetaFunction<typeof loader> = ({
+export const meta: MetaFunction<typeof loader> = ({
   data,
 }) => {
   const { description, title } = data
@@ -7261,7 +7261,7 @@ export function JokeDisplay({
 import type {
   ActionArgs,
   LoaderArgs,
-  V2_MetaFunction,
+  MetaFunction,
 } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import {
@@ -7278,7 +7278,7 @@ import {
   requireUserId,
 } from "~/utils/session.server";
 
-export const meta: V2_MetaFunction<typeof loader> = ({
+export const meta: MetaFunction<typeof loader> = ({
   data,
 }) => {
   const { description, title } = data
diff --git a/integration/defer-test.ts b/integration/defer-test.ts
index 91b42b07ff9..2c307ee257b 100644
--- a/integration/defer-test.ts
+++ b/integration/defer-test.ts
@@ -82,11 +82,9 @@ test.describe("non-aborted", () => {
           import Counter from "~/components/counter";
           import Interactive from "~/components/interactive";
 
-          export const meta: MetaFunction = () => ({
-            charset: "utf-8",
-            title: "New Remix App",
-            viewport: "width=device-width, initial-scale=1",
-          });
+          export const meta: MetaFunction = () => {
+            return [{ title: "New Remix App" }];
+          };
 
           export const loader = () => defer({
             id: "${ROOT_ID}",
@@ -97,6 +95,8 @@ test.describe("non-aborted", () => {
             return (
               <html lang="en">
                 <head>
+                  <meta charSet="utf-8" />
+                  <meta name="viewport" content="width=device-width,initial-scale=1" />
                   <Meta />
                   <Links />
                 </head>
@@ -1144,11 +1144,9 @@ test.describe("aborted", () => {
           import Counter from "~/components/counter";
           import Interactive from "~/components/interactive";
 
-          export const meta: MetaFunction = () => ({
-            charset: "utf-8",
-            title: "New Remix App",
-            viewport: "width=device-width, initial-scale=1",
-          });
+          export const meta: MetaFunction = () => {
+            return [{ title: "New Remix App" }];
+          };
 
           export const loader = () => defer({
             id: "${ROOT_ID}",
@@ -1159,6 +1157,8 @@ test.describe("aborted", () => {
             return (
               <html lang="en">
                 <head>
+                  <meta charSet="utf-8" />
+                  <meta name="viewport" content="width=device-width,initial-scale=1" />
                   <Meta />
                   <Links />
                 </head>
diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts
index 1691476cf5d..3c278efcbaa 100644
--- a/integration/hmr-log-test.ts
+++ b/integration/hmr-log-test.ts
@@ -18,8 +18,6 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
         port: options.devPort,
       },
       v2_routeConvention: true,
-
-      v2_meta: true,
       v2_headers: true,
     },
   },
diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 8df8a747317..144aba3bf84 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -18,8 +18,6 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
         port: options.devPort,
       },
       v2_routeConvention: true,
-
-      v2_meta: true,
       v2_headers: true,
     },
   },
diff --git a/integration/link-test.ts b/integration/link-test.ts
index b301a0fb4e7..671957083cd 100644
--- a/integration/link-test.ts
+++ b/integration/link-test.ts
@@ -384,12 +384,14 @@ test.describe("route module link export", () => {
           }
           export function meta({ data, params }) {
             let { username } = params;
-            return {
-              title: data
-                ? data.length + " gists from " + username
-                : "User " + username + " not found",
-              description: "View all of the gists from " + username,
-            };
+            return [
+              {
+                title: data
+                  ? data.length + " gists from " + username
+                  : "User " + username + " not found",
+              },
+              { name: "description", content: "View all of the gists from " + username },
+            ];
           }
           export let handle = {
             breadcrumb: ({ params }) => (
@@ -431,10 +433,10 @@ test.describe("route module link export", () => {
             };
           }
           export function meta() {
-            return {
-              title: "Public Gists",
-              description: "View the latest gists from the public",
-            };
+            return [
+              { title: "Public Gists" },
+              { name: "description", content: "View the latest gists from the public" },
+            ];
           }
           export let handle = {
             breadcrumb: () => <span>Public</span>,
diff --git a/integration/mdx-test.ts b/integration/mdx-test.ts
index 28e628a7736..6a323683698 100644
--- a/integration/mdx-test.ts
+++ b/integration/mdx-test.ts
@@ -57,8 +57,9 @@ test.describe("mdx", () => {
 
         "app/routes/blog.post.mdx": mdx`---
 meta:
-  title: My First Post
-  description: Isn't this awesome?
+- title: My First Post
+- name: description
+  content: Isn't this awesome?
 handle:
   someData: abc
 headers:
diff --git a/integration/meta-test.ts b/integration/meta-test.ts
index a04a61e91bc..e55ca87046f 100644
--- a/integration/meta-test.ts
+++ b/integration/meta-test.ts
@@ -13,396 +13,11 @@ test.describe("meta", () => {
   // and move the following line there
   test.use({ javaScriptEnabled: false });
 
-  test.beforeAll(async () => {
-    fixture = await createFixture({
-      config: {
-        future: { v2_routeConvention: true },
-      },
-      files: {
-        "app/root.jsx": js`
-          import { json } from "@remix-run/node";
-          import { Meta, Links, Outlet, Scripts } from "@remix-run/react";
-
-          export const loader = async () =>
-            json({
-              description: "This is a meta page",
-              title: "Meta Page",
-            });
-
-          export const meta = ({ data }) => ({
-            charset: "utf-8",
-            description: data.description,
-            "og:image": "https://picsum.photos/200/200",
-            "og:type": data.contentType, // undefined
-            refresh: {
-              httpEquiv: "refresh",
-              content: "3;url=https://www.mozilla.org",
-            },
-            title: data.title,
-          });
-
-          export default function Root() {
-            return (
-              <html lang="en">
-                <head>
-                  <Meta />
-                  <Links />
-                </head>
-                <body>
-                  <Outlet />
-                  <Scripts />
-                </body>
-              </html>
-            );
-          }
-        `,
-
-        "app/routes/_index.jsx": js`
-          export default function Index() {
-            return <div>This is the index file</div>;
-          }
-        `,
-
-        "app/routes/music.jsx": js`
-          export function meta({ data }) {
-            return {
-              title: "What's My Age Again?",
-              "og:type": "music.song",
-              "music:musician": "https://www.blink182.com/",
-              "music:duration": 182,
-            };
-          }
-
-          export default function Music() {
-            return <h1>Music</h1>;
-          }
-        `,
-
-        "app/routes/video.jsx": js`
-          export function meta({ data }) {
-            return {
-              title: "Catch Me If You Can",
-              "og:type": "video.movie",
-              "video:actor": "Leonardo DiCaprio",
-              "video:actor:role": "Frank Abagnale Jr.",
-              "video:director": "Steven Spielberg",
-            };
-          }
-
-          export default function Video() {
-            return <h1>Video</h1>;
-          }
-        `,
-
-        "app/routes/book.jsx": js`
-          export function meta({ data }) {
-            return {
-              title: "The Hitchhiker's Guide to the Galaxy",
-              "og:type": "book",
-              "book:author": "Douglas Adams",
-              "book:isbn": "0345391802",
-            };
-          }
-
-          export default function Book() {
-            return <h1>Book</h1>;
-          }
-        `,
-
-        "app/routes/profile.jsx": js`
-          export function meta({ data }) {
-            return {
-              title: "Chance's Profile",
-              "og:type": "profile",
-              "profile:first_name": "Chance",
-              "profile:last_name": "Strickland",
-              "profile:username": "chancethedev",
-            };
-          }
-
-          export default function Profile() {
-            return <h1>Profile</h1>;
-          }
-        `,
-
-        "app/routes/fb.jsx": js`
-          export function meta({ data }) {
-            return {
-              "fb:app_id": "54321",
-            };
-          }
-
-          export default function FB() {
-            return <h1>FB App</h1>;
-          }
-        `,
-
-        "app/routes/twitter.jsx": js`
-          export function meta({ data }) {
-            return {
-              "twitter:site": "@chancethedev",
-            };
-          }
-
-          export default function Twitter() {
-            return <h1>Twitter App</h1>;
-          }
-        `,
-
-        "app/routes/bogus.jsx": js`
-          export function meta({ data }) {
-            return {
-              title: "Bogus page",
-              "bogus:value": "Whatever man",
-            };
-          }
-
-          export default function Profile() {
-            return <h1>Profile</h1>;
-          }
-        `,
-
-        "app/routes/blog.jsx": js`
-          import { Outlet } from "@remix-run/react";
-
-          export const meta = ({ data }) => ({
-            title: "Blog",
-            description: "The best blog on earth",
-            "og:image": "https://picsum.photos/300/300",
-            "og:type": "article",
-            "article:author": ["Logan McAnsh", "Chance Strickland"],
-          });
-
-          export default function BlogLayout() {
-            return (
-              <div>
-                <h1>Blog</h1>
-                <Outlet />
-              </div>
-            );
-          }
-        `,
-
-        "app/routes/blog._index.jsx": js`
-          import { Link, useLoaderData } from "@remix-run/react";
-          import { json } from "@remix-run/node";
-
-          const posts = [
-            { id: 1, title: "Post 1", content: "This is post 1" },
-            { id: 2, title: "Post 2", content: "This is post 2", author: "Ryan Florence" },
-            { id: 3, title: "Post 3", content: "This is post 3" },
-          ];
-
-          export const loader = async () => json({ posts });
-
-          export function meta({ data }) {
-            return {
-              title: "Blog Posts",
-            };
-          }
-
-          export default function BlogIndex() {
-            let { posts } = useLoaderData();
-            return (
-              <ul>
-                {posts.map((post) => (
-                  <li key={post.id}>
-                    <Link to={"/blog/" + post.id}>{post.title}</Link>
-                  </li>
-                ))}
-              </ul>
-            );
-          }
-        `,
-
-        "app/routes/blog.$pid.jsx": js`
-          import { useLoaderData } from "@remix-run/react";
-          import { json } from "@remix-run/node";
-
-          const posts = [
-            { id: 1, title: "Post 1", content: "This is post 1" },
-            { id: 2, title: "Post 2", content: "This is post 2", author: "Ryan Florence" },
-            { id: 3, title: "Post 3", content: "This is post 3" },
-          ];
-
-          export async function loader({ params }) {
-            let post = posts.find((post) => post.id === Number(params.pid));
-            if (!post) {
-              throw json(null, 404);
-            }
-            return json(post);
-          }
-
-          export function meta({ data }) {
-            let meta = {
-              title: data.title + " | Blog",
-            };
-            if (data.author) {
-              meta["article:author"] = data.author;
-            }
-            return meta;
-          }
-
-          export default function BlogPost() {
-            let post = useLoaderData();
-            return (
-              <div>
-                <h1>{post.title}</h1>
-                <p>{post.content}</p>
-              </div>
-            );
-          }
-        `,
-      },
-    });
-
-    appFixture = await createAppFixture(fixture);
-  });
-
-  test.afterAll(() => {
-    appFixture.close();
-  });
-
-  test("empty meta does not render a tag", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-
-    await expect(app.getHtml('meta[property="og:type"]')).rejects.toThrowError(
-      'No element matches selector "meta[property="og:type"]"'
-    );
-  });
-
-  test("{ charset } adds a <meta charset='utf-8' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-
-    expect(await app.getHtml('meta[charset="utf-8"]')).toBeTruthy();
-  });
-
-  test("{ title } adds a <title />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-
-    expect(await app.getHtml("title")).toBeTruthy();
-  });
-
-  test("{ 'og:*' } adds a <meta property='og:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-    expect(await app.getHtml('meta[property="og:image"]')).toBeTruthy();
-  });
-
-  test("{ 'music:*' } adds a <meta property='music:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/music");
-    expect(await app.getHtml('meta[property="music:musician"]')).toBeTruthy();
-  });
-
-  test("{ 'video:*' } adds a <meta property='video:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/video");
-    expect(await app.getHtml('meta[property="video:actor"]')).toBeTruthy();
-  });
-
-  test("{ 'book:*' } adds a <meta property='book:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/book");
-    expect(await app.getHtml('meta[property="book:author"]')).toBeTruthy();
-  });
-
-  test("{ 'profile:*' } adds a <meta property='profile:*' />", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/profile");
-    expect(await app.getHtml('meta[property="profile:username"]')).toBeTruthy();
-  });
-
-  test("{ 'fb:*' } adds a <meta property='fb:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/fb");
-    expect(await app.getHtml('meta[property="fb:app_id"]')).toBeTruthy();
-  });
-
-  test("{ 'twitter:*' } adds a <meta name='twitter:*' />", async ({ page }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/twitter");
-    expect(await app.getHtml('meta[name="twitter:site"]')).toBeTruthy();
-  });
-
-  test("{ 'article:*' } adds a <meta property='article:*' />", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/blog");
-    expect(await app.getHtml('meta[property="article:author"]')).toBeTruthy();
-  });
-
-  test("{ description } adds a <meta name='description' />", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-
-    expect(await app.getHtml('meta[name="description"]')).toBeTruthy();
-  });
-
-  test("{ refresh } adds a <meta http-equiv='refresh' content='3;url=https://www.mozilla.org' />", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/");
-
-    expect(
-      await app.getHtml(
-        'meta[http-equiv="refresh"][content="3;url=https://www.mozilla.org"]'
-      )
-    ).toBeTruthy();
-  });
-
-  test("arbitrary key with : adds a <meta name='[VALUE]' />", async ({
-    page,
-  }) => {
-    let app = new PlaywrightFixture(appFixture, page);
-    await app.goto("/bogus");
-    expect(await app.getHtml('meta[name="bogus:value"]')).toBeTruthy();
-  });
-
-  test.describe("in nested routes", () => {
-    test("meta from layout routes are inherited", async ({ page }) => {
-      let app = new PlaywrightFixture(appFixture, page);
-      await app.goto("/blog");
-
-      expect(
-        await app.getHtml(
-          'meta[name="description"][content="The best blog on earth"]'
-        )
-      ).toBeTruthy();
-    });
-
-    test("meta from layout routes can be overridden", async ({ page }) => {
-      let app = new PlaywrightFixture(appFixture, page);
-      await app.goto("/blog");
-      expect(await app.getHtml("title")).toBe("<title>Blog Posts</title>");
-    });
-  });
-});
-
-test.describe("v2_meta", () => {
-  let fixture: Fixture;
-  let appFixture: AppFixture;
-
-  // disable JS for all tests in this file
-  // to only disable them for some, add another test.describe()
-  // and move the following line there
-  test.use({ javaScriptEnabled: false });
-
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {
         ignoredRouteFiles: ["**/.*"],
         future: {
-          v2_meta: true,
           v2_routeConvention: true,
         },
       },
diff --git a/packages/remix-cloudflare/index.ts b/packages/remix-cloudflare/index.ts
index 35fb287eb9b..06b2b8dcd5f 100644
--- a/packages/remix-cloudflare/index.ts
+++ b/packages/remix-cloudflare/index.ts
@@ -42,7 +42,6 @@ export type {
   HeadersArgs,
   HeadersFunction,
   HtmlLinkDescriptor,
-  HtmlMetaDescriptor,
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
@@ -50,8 +49,6 @@ export type {
   LoaderFunction,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
-  MetaDescriptor,
-  MetaFunction,
   HandleErrorFunction,
   PageLinkDescriptor,
   RequestHandler,
@@ -59,11 +56,9 @@ export type {
   SerializeFrom,
   ServerBuild,
   ServerEntryModule,
-  V2_ServerRuntimeMetaArgs as V2_MetaArgs,
-  V2_ServerRuntimeMetaDescriptor as V2_MetaDescriptor,
-  // TODO: Remove in v2
-  V2_ServerRuntimeMetaDescriptor as V2_HtmlMetaDescriptor,
-  V2_ServerRuntimeMetaFunction as V2_MetaFunction,
+  ServerRuntimeMetaArgs as MetaArgs,
+  ServerRuntimeMetaDescriptor as MetaDescriptor,
+  ServerRuntimeMetaFunction as MetaFunction,
   Session,
   SessionData,
   SessionIdStorageStrategy,
diff --git a/packages/remix-deno/index.ts b/packages/remix-deno/index.ts
index 40346581e68..f571cadde88 100644
--- a/packages/remix-deno/index.ts
+++ b/packages/remix-deno/index.ts
@@ -46,7 +46,6 @@ export type {
   HeadersArgs,
   HeadersFunction,
   HtmlLinkDescriptor,
-  HtmlMetaDescriptor,
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
@@ -54,8 +53,6 @@ export type {
   LoaderFunction,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
-  MetaDescriptor,
-  MetaFunction,
   PageLinkDescriptor,
   RequestHandler,
   RouteHandle,
@@ -72,9 +69,7 @@ export type {
   UnsignFunction,
   UploadHandler,
   UploadHandlerPart,
-  V2_ServerRuntimeMetaArgs as V2_MetaArgs,
-  // TODO: Remove in v2
-  V2_ServerRuntimeMetaDescriptor as V2_HtmlMetaDescriptor,
-  V2_ServerRuntimeMetaDescriptor as V2_MetaDescriptor,
-  V2_ServerRuntimeMetaFunction as V2_MetaFunction,
+  ServerRuntimeMetaArgs as MetaArgs,
+  ServerRuntimeMetaDescriptor as MetaDescriptor,
+  ServerRuntimeMetaFunction as MetaFunction,
 } from "@remix-run/server-runtime";
diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx b/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx
index 43a72817b93..1f082523e7b 100644
--- a/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx
+++ b/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx
@@ -1,4 +1,3 @@
-import type { MetaFunction } from "@remix-run/cloudflare";
 import {
   Links,
   LiveReload,
@@ -8,16 +7,12 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width,initial-scale=1",
-});
-
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx b/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx
index 9171cb50f31..a6a08d93909 100644
--- a/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx
+++ b/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx
@@ -1,4 +1,3 @@
-import type { MetaFunction } from "@remix-run/deno";
 import {
   Links,
   LiveReload,
@@ -9,16 +8,12 @@ import {
 } from "@remix-run/react";
 import * as React from "react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width,initial-scale=1",
-});
-
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx b/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx
index 7c22c07c9c4..119e458e105 100644
--- a/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx
+++ b/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx
@@ -1,4 +1,9 @@
 import * as React from "react";
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "New Remix App" }];
+};
 
 export default function Index() {
   return (
diff --git a/packages/remix-dev/__tests__/fixtures/indie-stack/app/root.tsx b/packages/remix-dev/__tests__/fixtures/indie-stack/app/root.tsx
index d309ee980d4..1f082523e7b 100644
--- a/packages/remix-dev/__tests__/fixtures/indie-stack/app/root.tsx
+++ b/packages/remix-dev/__tests__/fixtures/indie-stack/app/root.tsx
@@ -1,4 +1,3 @@
-import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
@@ -8,16 +7,12 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width, initial-scale=1",
-});
-
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
diff --git a/packages/remix-dev/__tests__/fixtures/indie-stack/app/routes/index.tsx b/packages/remix-dev/__tests__/fixtures/indie-stack/app/routes/index.tsx
index cbca6124ea7..f024a40f924 100644
--- a/packages/remix-dev/__tests__/fixtures/indie-stack/app/routes/index.tsx
+++ b/packages/remix-dev/__tests__/fixtures/indie-stack/app/routes/index.tsx
@@ -1,3 +1,9 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "New Remix App" }];
+};
+
 export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
diff --git a/packages/remix-dev/__tests__/fixtures/node/app/root.tsx b/packages/remix-dev/__tests__/fixtures/node/app/root.tsx
index 927a0f745df..1f082523e7b 100644
--- a/packages/remix-dev/__tests__/fixtures/node/app/root.tsx
+++ b/packages/remix-dev/__tests__/fixtures/node/app/root.tsx
@@ -1,4 +1,3 @@
-import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
@@ -8,16 +7,12 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "New Remix App",
-  viewport: "width=device-width,initial-scale=1",
-});
-
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
diff --git a/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx b/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx
index cbca6124ea7..f024a40f924 100644
--- a/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx
+++ b/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx
@@ -1,3 +1,9 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "New Remix App" }];
+};
+
 export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
index da6bbd772be..0eda0a53e3c 100644
--- a/packages/remix-dev/__tests__/readConfig-test.ts
+++ b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -26,7 +26,6 @@ describe("readConfig", () => {
         tsconfigPath: expect.any(String),
         future: {
           v2_headers: expect.any(Boolean),
-          v2_meta: expect.any(Boolean),
           v2_routeConvention: expect.any(Boolean),
         },
       },
@@ -44,7 +43,6 @@ describe("readConfig", () => {
         "future": Object {
           "v2_dev": false,
           "v2_headers": Any<Boolean>,
-          "v2_meta": Any<Boolean>,
           "v2_routeConvention": Any<Boolean>,
         },
         "mdx": undefined,
diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
index 25d71be4f74..5792d98d5c7 100644
--- a/packages/remix-dev/config.ts
+++ b/packages/remix-dev/config.ts
@@ -46,7 +46,6 @@ type Dev = {
 interface FutureConfig {
   v2_dev: boolean | Dev;
   v2_headers: boolean;
-  v2_meta: boolean;
   v2_routeConvention: boolean;
 }
 
@@ -404,10 +403,6 @@ export async function readConfig(
     }
   }
 
-  if (!appConfig.future?.v2_meta) {
-    metaWarning();
-  }
-
   if (!appConfig.future?.v2_headers) {
     headersWarning();
   }
@@ -661,7 +656,6 @@ export async function readConfig(
   let future: FutureConfig = {
     v2_dev: appConfig.future?.v2_dev ?? false,
     v2_headers: appConfig.future?.v2_headers === true,
-    v2_meta: appConfig.future?.v2_meta === true,
     v2_routeConvention: appConfig.future?.v2_routeConvention === true,
   };
 
@@ -795,12 +789,6 @@ let flatRoutesWarning = futureFlagWarning({
   link: "https://remix.run/docs/en/v1.15.0/pages/v2#file-system-route-convention",
 });
 
-let metaWarning = futureFlagWarning({
-  message: "The route `meta` API is changing in v2",
-  flag: "v2_meta",
-  link: "https://remix.run/docs/en/v1.15.0/pages/v2#meta",
-});
-
 let headersWarning = futureFlagWarning({
   message: "The route `headers` API is changing in v2",
   flag: "v2_headers",
diff --git a/packages/remix-node/index.ts b/packages/remix-node/index.ts
index c42cd61c626..f9d6e2cf204 100644
--- a/packages/remix-node/index.ts
+++ b/packages/remix-node/index.ts
@@ -68,7 +68,6 @@ export type {
   HeadersArgs,
   HeadersFunction,
   HtmlLinkDescriptor,
-  HtmlMetaDescriptor,
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
@@ -76,8 +75,6 @@ export type {
   LoaderFunction,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
-  MetaDescriptor,
-  MetaFunction,
   HandleErrorFunction,
   PageLinkDescriptor,
   RequestHandler,
@@ -85,11 +82,9 @@ export type {
   SerializeFrom,
   ServerBuild,
   ServerEntryModule,
-  V2_ServerRuntimeMetaArgs as V2_MetaArgs,
-  V2_ServerRuntimeMetaDescriptor as V2_MetaDescriptor,
-  // TODO: Remove in v2
-  V2_ServerRuntimeMetaDescriptor as V2_HtmlMetaDescriptor,
-  V2_ServerRuntimeMetaFunction as V2_MetaFunction,
+  ServerRuntimeMetaArgs as MetaArgs,
+  ServerRuntimeMetaDescriptor as MetaDescriptor,
+  ServerRuntimeMetaFunction as MetaFunction,
   Session,
   SessionData,
   SessionIdStorageStrategy,
diff --git a/packages/remix-react/__tests__/components-test.tsx b/packages/remix-react/__tests__/components-test.tsx
index 616a7de3c19..83a007d028d 100644
--- a/packages/remix-react/__tests__/components-test.tsx
+++ b/packages/remix-react/__tests__/components-test.tsx
@@ -101,7 +101,6 @@ function itPrefetchesPageLinks<
         url: "",
         version: "",
       },
-      future: { v2_meta: false },
     };
 
     beforeEach(() => {
diff --git a/packages/remix-react/__tests__/scroll-restoration-test.tsx b/packages/remix-react/__tests__/scroll-restoration-test.tsx
index e2f1e8f9524..c7b7a72ee0d 100644
--- a/packages/remix-react/__tests__/scroll-restoration-test.tsx
+++ b/packages/remix-react/__tests__/scroll-restoration-test.tsx
@@ -44,7 +44,6 @@ describe("<ScrollRestoration />", () => {
       url: "",
       version: "",
     },
-    future: { v2_meta: false },
   };
 
   it("should render a <script> tag", () => {
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index f4c6945a0b4..d366e9a6207 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -45,12 +45,10 @@ import {
 import type { HtmlLinkDescriptor, PrefetchPageDescriptor } from "./links";
 import { createHtml, escapeHtml } from "./markup";
 import type {
-  V1_HtmlMetaDescriptor,
-  V1_MetaFunction,
-  V2_MetaDescriptor,
-  V2_MetaFunction,
-  V2_MetaMatch,
-  V2_MetaMatches,
+  MetaFunction,
+  MetaDescriptor,
+  MetaMatch,
+  MetaMatches,
 } from "./routeModules";
 import { logDeprecationOnce } from "./warnings";
 
@@ -513,120 +511,11 @@ function PrefetchPageLinksImpl({
 }
 
 /**
- * Renders the `<title>` and `<meta>` tags for the current routes.
+ * Renders HTML tags related to metadata for the current route.
  *
  * @see https://remix.run/components/meta
  */
-function V1Meta() {
-  let { routeModules } = useRemixContext();
-  let {
-    errors,
-    matches: routerMatches,
-    loaderData,
-  } = useDataRouterStateContext();
-  let location = useLocation();
-
-  let matches = errors
-    ? routerMatches.slice(
-        0,
-        routerMatches.findIndex((m) => errors![m.route.id]) + 1
-      )
-    : routerMatches;
-
-  let meta: V1_HtmlMetaDescriptor = {};
-  let parentsData: { [routeId: string]: AppData } = {};
-
-  for (let match of matches) {
-    let routeId = match.route.id;
-    let data = loaderData[routeId];
-    let params = match.params;
-
-    let routeModule = routeModules[routeId];
-
-    if (routeModule.meta) {
-      let routeMeta =
-        typeof routeModule.meta === "function"
-          ? (routeModule.meta as V1_MetaFunction)({
-              data,
-              parentsData,
-              params,
-              location,
-            })
-          : routeModule.meta;
-      if (routeMeta && Array.isArray(routeMeta)) {
-        throw new Error(
-          "The route at " +
-            match.route.path +
-            " returns an array. This is only supported with the `v2_meta` future flag " +
-            "in the Remix config. Either set the flag to `true` or update the route's " +
-            "meta function to return an object." +
-            "\n\nTo reference the v1 meta function API, see https://remix.run/route/meta"
-          // TODO: Add link to the docs once they are written
-          // + "\n\nTo reference future flags and the v2 meta API, see https://remix.run/file-conventions/remix-config#future-v2-meta."
-        );
-      }
-      Object.assign(meta, routeMeta);
-    }
-
-    parentsData[routeId] = data;
-  }
-
-  return (
-    <>
-      {Object.entries(meta).map(([name, value]) => {
-        if (!value) {
-          return null;
-        }
-
-        if (["charset", "charSet"].includes(name)) {
-          return <meta key="charSet" charSet={value as string} />;
-        }
-
-        if (name === "title") {
-          return <title key="title">{String(value)}</title>;
-        }
-
-        // Open Graph tags use the `property` attribute, while other meta tags
-        // use `name`. See https://ogp.me/
-        //
-        // Namespaced attributes:
-        //  - https://ogp.me/#type_music
-        //  - https://ogp.me/#type_video
-        //  - https://ogp.me/#type_article
-        //  - https://ogp.me/#type_book
-        //  - https://ogp.me/#type_profile
-        //
-        // Facebook specific tags begin with `fb:` and also use the `property`
-        // attribute.
-        //
-        // Twitter specific tags begin with `twitter:` but they use `name`, so
-        // they are excluded.
-        let isOpenGraphTag =
-          /^(og|music|video|article|book|profile|fb):.+$/.test(name);
-
-        return [value].flat().map((content) => {
-          if (isOpenGraphTag) {
-            return (
-              <meta
-                property={name}
-                content={content as string}
-                key={name + content}
-              />
-            );
-          }
-
-          if (typeof content === "string") {
-            return <meta name={name} content={content} key={name + content} />;
-          }
-
-          return <meta key={name + JSON.stringify(content)} {...content} />;
-        });
-      })}
-    </>
-  );
-}
-
-function V2Meta() {
+export function Meta() {
   let { routeModules } = useRemixContext();
   let {
     errors,
@@ -642,43 +531,31 @@ function V2Meta() {
       )
     : routerMatches;
 
-  let meta: V2_MetaDescriptor[] = [];
-  let leafMeta: V2_MetaDescriptor[] | null = null;
-  let matches: V2_MetaMatches = [];
+  let meta: MetaDescriptor[] = [];
+  let leafMeta: MetaDescriptor[] | null = null;
+  let matches: MetaMatches = [];
   for (let i = 0; i < _matches.length; i++) {
     let _match = _matches[i];
     let routeId = _match.route.id;
     let data = loaderData[routeId];
     let params = _match.params;
     let routeModule = routeModules[routeId];
-    let routeMeta: V2_MetaDescriptor[] | V1_HtmlMetaDescriptor | undefined = [];
+    let routeMeta: MetaDescriptor[] | undefined = [];
 
-    let match: V2_MetaMatch = {
+    let match: MetaMatch = {
       id: routeId,
       data,
       meta: [],
       params: _match.params,
       pathname: _match.pathname,
       handle: _match.route.handle,
-      // TODO: Remove in v2. Only leaving it for now because we used it in
-      // examples and there's no reason to crash someone's build for one line.
-      // They'll get a TS error from the type updates anyway.
-      // @ts-expect-error
-      get route() {
-        console.warn(
-          "The meta function in " +
-            _match.route.path +
-            " accesses the `route` property on `matches`. This is deprecated and will be removed in Remix version 2. See"
-        );
-        return _match.route;
-      },
     };
     matches[i] = match;
 
     if (routeModule?.meta) {
       routeMeta =
         typeof routeModule.meta === "function"
-          ? (routeModule.meta as V2_MetaFunction)({
+          ? (routeModule.meta as MetaFunction)({
               data,
               params,
               location,
@@ -697,13 +574,11 @@ function V2Meta() {
     routeMeta = routeMeta || [];
     if (!Array.isArray(routeMeta)) {
       throw new Error(
-        "The `v2_meta` API is enabled in the Remix config, but the route at " +
+        "The route at " +
           _match.route.path +
-          " returns an invalid value. In v2, all route meta functions must " +
+          " returns an invalid value. All route meta functions must " +
           "return an array of meta objects." +
-          // TODO: Add link to the docs once they are written
-          // "\n\nTo reference future flags and the v2 meta API, see https://remix.run/file-conventions/remix-config#future-v2-meta." +
-          "\n\nTo reference the v1 meta function API, see https://remix.run/route/meta"
+          "\n\nTo reference the meta function API, see https://remix.run/route/meta"
       );
     }
 
@@ -775,11 +650,6 @@ function isValidMetaTag(tagName: unknown): tagName is "meta" | "link" {
   return typeof tagName === "string" && /^(meta|link)$/.test(tagName);
 }
 
-export function Meta() {
-  let { future } = useRemixContext();
-  return future?.v2_meta ? <V2Meta /> : <V1Meta />;
-}
-
 export interface AwaitProps<Resolve> {
   children: React.ReactNode | ((value: Awaited<Resolve>) => React.ReactNode);
   errorElement?: React.ReactNode;
diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
index d1513a7f6b3..cb72da41e88 100644
--- a/packages/remix-react/entry.ts
+++ b/packages/remix-react/entry.ts
@@ -35,7 +35,6 @@ type Dev = {
 export interface FutureConfig {
   v2_dev: boolean | Dev;
   v2_headers: boolean;
-  v2_meta: boolean;
   v2_routeConvention: boolean;
 }
 
diff --git a/packages/remix-react/index.tsx b/packages/remix-react/index.tsx
index 37864c79540..96d7c7e9ed6 100644
--- a/packages/remix-react/index.tsx
+++ b/packages/remix-react/index.tsx
@@ -74,10 +74,9 @@ export {
 
 export type { HtmlLinkDescriptor } from "./links";
 export type {
-  HtmlMetaDescriptor,
-  V2_MetaArgs,
-  V2_MetaDescriptor,
-  V2_MetaFunction,
+  MetaArgs,
+  MetaDescriptor,
+  MetaFunction,
   RouteModules as UNSAFE_RouteModules,
 } from "./routeModules";
 
diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts
index 07913bd32e4..ff63ec03bb7 100644
--- a/packages/remix-react/routeModules.ts
+++ b/packages/remix-react/routeModules.ts
@@ -1,5 +1,4 @@
 import type { ComponentType } from "react";
-import type { RouterState } from "@remix-run/router";
 import type {
   DataRouteMatch,
   Params,
@@ -12,8 +11,6 @@ import type { AppData } from "./data";
 import type { LinkDescriptor } from "./links";
 import type { EntryRoute } from "./routes";
 
-type RouteData = RouterState["loaderData"];
-
 export interface RouteModules {
   [routeId: string]: RouteModule;
 }
@@ -23,11 +20,7 @@ export interface RouteModule {
   default: RouteComponent;
   handle?: RouteHandle;
   links?: LinksFunction;
-  meta?:
-    | V1_MetaFunction
-    | V1_HtmlMetaDescriptor
-    | V2_MetaFunction
-    | V2_MetaDescriptor[];
+  meta?: MetaFunction;
   shouldRevalidate?: ShouldRevalidateFunction;
 }
 
@@ -48,30 +41,7 @@ export interface LinksFunction {
   (): LinkDescriptor[];
 }
 
-/**
- * A function that returns an object of name + content pairs to use for
- * `<meta>` tags for a route. These tags will be merged with (and take
- * precedence over) tags from parent routes.
- *
- * @see https://remix.run/route/meta
- */
-export interface V1_MetaFunction {
-  (args: {
-    data: AppData;
-    parentsData: RouteData;
-    params: Params;
-    location: Location;
-  }): HtmlMetaDescriptor;
-}
-
-// TODO: Replace in v2
-export type MetaFunction = V1_MetaFunction;
-
-export interface RouteMatchWithMeta extends DataRouteMatch {
-  meta: V2_MetaDescriptor[];
-}
-
-export interface V2_MetaMatch<
+export interface MetaMatch<
   RouteId extends string = string,
   Loader extends LoaderFunction | unknown = unknown
 > {
@@ -80,21 +50,21 @@ export interface V2_MetaMatch<
   data: Loader extends LoaderFunction ? SerializeFrom<Loader> : unknown;
   handle?: unknown;
   params: DataRouteMatch["params"];
-  meta: V2_MetaDescriptor[];
+  meta: MetaDescriptor[];
 }
 
-export type V2_MetaMatches<
+export type MetaMatches<
   MatchLoaders extends Record<string, unknown> = Record<string, unknown>
 > = Array<
   {
-    [K in keyof MatchLoaders]: V2_MetaMatch<
+    [K in keyof MatchLoaders]: MetaMatch<
       Exclude<K, number | symbol>,
       MatchLoaders[K]
     >;
   }[keyof MatchLoaders]
 >;
 
-export interface V2_MetaArgs<
+export interface MetaArgs<
   Loader extends LoaderFunction | unknown = unknown,
   MatchLoaders extends Record<string, unknown> = Record<string, unknown>
 > {
@@ -103,38 +73,17 @@ export interface V2_MetaArgs<
     | undefined;
   params: Params;
   location: Location;
-  matches: V2_MetaMatches<MatchLoaders>;
+  matches: MetaMatches<MatchLoaders>;
 }
 
-export interface V2_MetaFunction<
+export interface MetaFunction<
   Loader extends LoaderFunction | unknown = unknown,
   MatchLoaders extends Record<string, unknown> = Record<string, unknown>
 > {
-  (args: V2_MetaArgs<Loader, MatchLoaders>): V2_MetaDescriptor[] | undefined;
+  (args: MetaArgs<Loader, MatchLoaders>): MetaDescriptor[] | undefined;
 }
 
-/**
- * A name/content pair used to render `<meta>` tags in a meta function for a
- * route. The value can be either a string, which will render a single `<meta>`
- * tag, or an array of strings that will render multiple tags with the same
- * `name` attribute.
- */
-export interface V1_HtmlMetaDescriptor {
-  charset?: "utf-8";
-  charSet?: "utf-8";
-  title?: string;
-  [name: string]:
-    | null
-    | string
-    | undefined
-    | Record<string, string>
-    | Array<Record<string, string> | string>;
-}
-
-// TODO: Replace in v2
-export type HtmlMetaDescriptor = V1_HtmlMetaDescriptor;
-
-export type V2_MetaDescriptor =
+export type MetaDescriptor =
   | { charSet: "utf-8" }
   | { title: string }
   | { name: string; content: string }
diff --git a/packages/remix-server-runtime/__tests__/handler-test.ts b/packages/remix-server-runtime/__tests__/handler-test.ts
index bcb926ff93f..414aed248f3 100644
--- a/packages/remix-server-runtime/__tests__/handler-test.ts
+++ b/packages/remix-server-runtime/__tests__/handler-test.ts
@@ -16,9 +16,7 @@ describe("createRequestHandler", () => {
       assets: {} as any,
       entry: { module: {} as any },
       // @ts-expect-error
-      future: {
-        v2_meta: false,
-      },
+      future: {},
     });
 
     let response = await handler(
diff --git a/packages/remix-server-runtime/entry.ts b/packages/remix-server-runtime/entry.ts
index eba9031e093..55b46f11473 100644
--- a/packages/remix-server-runtime/entry.ts
+++ b/packages/remix-server-runtime/entry.ts
@@ -23,7 +23,6 @@ type Dev = {
 export interface FutureConfig {
   v2_dev: boolean | Dev;
   v2_headers: boolean;
-  v2_meta: boolean;
   v2_routeConvention: boolean;
 }
 
diff --git a/packages/remix-server-runtime/index.ts b/packages/remix-server-runtime/index.ts
index bfeb9870a7d..f6d4b8ddc8f 100644
--- a/packages/remix-server-runtime/index.ts
+++ b/packages/remix-server-runtime/index.ts
@@ -50,15 +50,12 @@ export type {
   HeadersArgs,
   HeadersFunction,
   HtmlLinkDescriptor,
-  HtmlMetaDescriptor,
   LinkDescriptor,
   LinksFunction,
   LoaderArgs,
   LoaderFunction,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
-  MetaDescriptor,
-  MetaFunction,
   HandleErrorFunction,
   PageLinkDescriptor,
   RequestHandler,
@@ -66,9 +63,9 @@ export type {
   SerializeFrom,
   ServerBuild,
   ServerEntryModule,
-  V2_ServerRuntimeMetaArgs,
-  V2_ServerRuntimeMetaDescriptor,
-  V2_ServerRuntimeMetaFunction,
+  ServerRuntimeMetaArgs,
+  ServerRuntimeMetaDescriptor,
+  ServerRuntimeMetaFunction,
   Session,
   SessionData,
   SessionIdStorageStrategy,
diff --git a/packages/remix-server-runtime/reexport.ts b/packages/remix-server-runtime/reexport.ts
index 0abd3acc00e..db3d948e8b1 100644
--- a/packages/remix-server-runtime/reexport.ts
+++ b/packages/remix-server-runtime/reexport.ts
@@ -40,16 +40,13 @@ export type {
   DataFunctionArgs,
   HeadersArgs,
   HeadersFunction,
-  HtmlMetaDescriptor,
   LinksFunction,
   LoaderArgs,
   LoaderFunction,
-  MetaDescriptor,
-  MetaFunction,
   RouteHandle,
-  V2_ServerRuntimeMetaArgs,
-  V2_ServerRuntimeMetaDescriptor,
-  V2_ServerRuntimeMetaFunction,
+  ServerRuntimeMetaArgs,
+  ServerRuntimeMetaDescriptor,
+  ServerRuntimeMetaFunction,
 } from "./routeModules";
 
 export type { SerializeFrom } from "./serialize";
diff --git a/packages/remix-server-runtime/routeModules.ts b/packages/remix-server-runtime/routeModules.ts
index 959e972ab63..c23f4bccbb3 100644
--- a/packages/remix-server-runtime/routeModules.ts
+++ b/packages/remix-server-runtime/routeModules.ts
@@ -1,16 +1,9 @@
-import type {
-  AgnosticRouteMatch,
-  Location,
-  Params,
-  RouterState,
-} from "@remix-run/router";
+import type { AgnosticRouteMatch, Location, Params } from "@remix-run/router";
 
 import type { AppLoadContext, AppData } from "./data";
 import type { LinkDescriptor } from "./links";
 import type { SerializeFrom } from "./serialize";
 
-type RouteData = RouterState["loaderData"];
-
 export interface RouteModules<RouteModule> {
   [routeId: string]: RouteModule;
 }
@@ -79,12 +72,14 @@ export interface LoaderFunction {
 }
 
 /**
- * A function that returns an object of name + content pairs to use for
- * `<meta>` tags for a route. These tags will be merged with (and take
- * precedence over) tags from parent routes.
+ * A function that returns an array of data objects to use for rendering
+ * metadata HTML tags in a route. These tags are not rendered on descendant
+ * routes in the route hierarchy. In other words, they will only be rendered on
+ * the route in which they are exported.
  *
- * @param Loader - Loader for this meta function's route
- * @param ParentsLoaders - Mapping from a parent's route filepath to that route's loader
+ * @param Loader - The type of the current route's loader function
+ * @param MatchLoaders - Mapping from a parent route's filepath to its loader
+ * function type
  *
  * Note that parent route filepaths are relative to the `app/` directory.
  *
@@ -122,39 +117,28 @@ export interface LoaderFunction {
  *  "root": RootLoader,
  *  "routes/sales": SalesLoader,
  *  "routes/sales/customers": CustomersLoader,
- * }> = ({ data, parentsData }) => {
+ * }> = ({ data, matches }) => {
  *   const { name } = data
  *   //      ^? string
- *   const { customerCount } = parentsData["routes/sales/customers"]
+ *   const { customerCount } = matches.find((match) => match.id === "routes/sales/customers").data
  *   //      ^? number
- *   const { salesCount } = parentsData["routes/sales"]
+ *   const { salesCount } = matches.find((match) => match.id === "routes/sales").data
  *   //      ^? number
- *   const { hello } = parentsData["root"]
+ *   const { hello } = matches.find((match) => match.id === "root").data
  *   //      ^? "world"
  * }
  * ```
  */
-export interface V1_MetaFunction<
+export interface ServerRuntimeMetaFunction<
   Loader extends LoaderFunction | unknown = unknown,
   ParentsLoaders extends Record<string, LoaderFunction> = {}
 > {
-  (args: {
-    data: Loader extends LoaderFunction ? SerializeFrom<Loader> : AppData;
-    parentsData: {
-      [k in keyof ParentsLoaders]: SerializeFrom<ParentsLoaders[k]>;
-    } & RouteData;
-    params: Params;
-    location: Location;
-  }): HtmlMetaDescriptor;
+  (
+    args: ServerRuntimeMetaArgs<Loader, ParentsLoaders>
+  ): ServerRuntimeMetaDescriptor[];
 }
 
-// TODO: Replace in v2
-export type MetaFunction<
-  Loader extends LoaderFunction | unknown = unknown,
-  ParentsLoaders extends Record<string, LoaderFunction> = {}
-> = V1_MetaFunction<Loader, ParentsLoaders>;
-
-interface V2_ServerRuntimeMetaMatch<
+interface ServerRuntimeMetaMatch<
   RouteId extends string = string,
   Loader extends LoaderFunction | unknown = unknown
 > {
@@ -163,21 +147,21 @@ interface V2_ServerRuntimeMetaMatch<
   data: Loader extends LoaderFunction ? SerializeFrom<Loader> : unknown;
   handle?: unknown;
   params: AgnosticRouteMatch["params"];
-  meta: V2_ServerRuntimeMetaDescriptor[];
+  meta: ServerRuntimeMetaDescriptor[];
 }
 
-type V2_ServerRuntimeMetaMatches<
+type ServerRuntimeMetaMatches<
   MatchLoaders extends Record<string, unknown> = Record<string, unknown>
 > = Array<
   {
-    [K in keyof MatchLoaders]: V2_ServerRuntimeMetaMatch<
+    [K in keyof MatchLoaders]: ServerRuntimeMetaMatch<
       Exclude<K, number | symbol>,
       MatchLoaders[K]
     >;
   }[keyof MatchLoaders]
 >;
 
-export interface V2_ServerRuntimeMetaArgs<
+export interface ServerRuntimeMetaArgs<
   Loader extends LoaderFunction | unknown = unknown,
   MatchLoaders extends Record<string, unknown> = Record<string, unknown>
 > {
@@ -186,42 +170,10 @@ export interface V2_ServerRuntimeMetaArgs<
     | undefined;
   params: Params;
   location: Location;
-  matches: V2_ServerRuntimeMetaMatches<MatchLoaders>;
+  matches: ServerRuntimeMetaMatches<MatchLoaders>;
 }
 
-export interface V2_ServerRuntimeMetaFunction<
-  Loader extends LoaderFunction | unknown = unknown,
-  ParentsLoaders extends Record<string, LoaderFunction> = {}
-> {
-  (
-    args: V2_ServerRuntimeMetaArgs<Loader, ParentsLoaders>
-  ): V2_ServerRuntimeMetaDescriptor[];
-}
-
-/**
- * A name/content pair used to render `<meta>` tags in a meta function for a
- * route. The value can be either a string, which will render a single `<meta>`
- * tag, or an array of strings that will render multiple tags with the same
- * `name` attribute.
- */
-export interface V1_HtmlMetaDescriptor {
-  charset?: "utf-8";
-  charSet?: "utf-8";
-  title?: string;
-  [name: string]:
-    | null
-    | string
-    | undefined
-    | Record<string, string>
-    | Array<Record<string, string> | string>;
-}
-
-// TODO: Replace in v2
-export type HtmlMetaDescriptor = V1_HtmlMetaDescriptor;
-
-export type MetaDescriptor = HtmlMetaDescriptor;
-
-export type V2_ServerRuntimeMetaDescriptor =
+export type ServerRuntimeMetaDescriptor =
   | { charSet: "utf-8" }
   | { title: string }
   | { name: string; content: string }
@@ -248,7 +200,7 @@ export interface EntryRouteModule {
   default: any; // Weakly typed because server-runtime is not React-aware
   handle?: RouteHandle;
   links?: LinksFunction;
-  meta?: MetaFunction | HtmlMetaDescriptor;
+  meta?: ServerRuntimeMetaFunction;
 }
 
 export interface ServerRouteModule extends EntryRouteModule {
diff --git a/packages/remix-testing/create-remix-stub.tsx b/packages/remix-testing/create-remix-stub.tsx
index 27cbd7fa6a8..d30482c07fa 100644
--- a/packages/remix-testing/create-remix-stub.tsx
+++ b/packages/remix-testing/create-remix-stub.tsx
@@ -126,7 +126,6 @@ export function createRemixStub(
         future: {
           v2_dev: false,
           v2_headers: false,
-          v2_meta: false,
           v2_routeConvention: false,
           ...remixConfigFuture,
         },
diff --git a/scripts/playground/template/app/routes/index.tsx b/scripts/playground/template/app/routes/index.tsx
index 0d0aee062a1..3f0f81745da 100644
--- a/scripts/playground/template/app/routes/index.tsx
+++ b/scripts/playground/template/app/routes/index.tsx
@@ -1,9 +1,9 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
 import { useOptionalUser } from "~/utils";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Remix Notes" }];
 };
 
@@ -11,13 +11,13 @@ export default function Index() {
   let user = useOptionalUser();
   return (
     <main>
-      <div className="flex flex-col justify-center items-center gap-12 mt-12">
+      <div className="flex flex-col items-center justify-center gap-12 mt-12">
         <h1 className="text-3xl font-bold">Remix Playground</h1>
         <div>
           {user ? (
             <Link
               to="/notes"
-              className="rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-blue-700 shadow-sm hover:bg-blue-50 sm:px-8"
+              className="px-4 py-3 text-base font-medium text-blue-700 bg-white border border-transparent rounded-md shadow-sm hover:bg-blue-50 sm:px-8"
             >
               View Notes for {user.email}
             </Link>
@@ -25,13 +25,13 @@ export default function Index() {
             <div className="flex gap-5">
               <Link
                 to="/join"
-                className="rounded-md border border-blue-500 bg-white px-4 py-3 text-base font-medium text-blue-700 shadow-sm hover:bg-blue-50 sm:px-8"
+                className="px-4 py-3 text-base font-medium text-blue-700 bg-white border border-blue-500 rounded-md shadow-sm hover:bg-blue-50 sm:px-8"
               >
                 Sign up
               </Link>
               <Link
                 to="/login"
-                className="rounded-md bg-blue-500 px-4 py-3 font-medium text-white hover:bg-blue-600"
+                className="px-4 py-3 font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600"
               >
                 Log In
               </Link>
diff --git a/scripts/playground/template/app/routes/join.tsx b/scripts/playground/template/app/routes/join.tsx
index b97cbe114d7..4f2cfeda9cf 100644
--- a/scripts/playground/template/app/routes/join.tsx
+++ b/scripts/playground/template/app/routes/join.tsx
@@ -1,4 +1,4 @@
-import type { ActionArgs, LoaderArgs, V2_MetaFunction } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
 import * as React from "react";
@@ -63,7 +63,7 @@ export async function action({ request }: ActionArgs) {
   });
 }
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Sign Up" }];
 };
 
@@ -83,8 +83,8 @@ export default function Join() {
   }, [actionData]);
 
   return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
+    <div className="flex flex-col justify-center min-h-full">
+      <div className="w-full max-w-md px-8 mx-auto">
         <Form method="post" className="space-y-6">
           <div>
             <label
@@ -104,7 +104,7 @@ export default function Join() {
                 autoComplete="email"
                 aria-invalid={actionData?.errors?.email ? true : undefined}
                 aria-describedby="email-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                className="w-full px-2 py-1 text-lg border border-gray-500 rounded"
               />
               {actionData?.errors?.email && (
                 <div className="pt-1 text-red-700" id="email-error">
@@ -130,7 +130,7 @@ export default function Join() {
                 autoComplete="new-password"
                 aria-invalid={actionData?.errors?.password ? true : undefined}
                 aria-describedby="password-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                className="w-full px-2 py-1 text-lg border border-gray-500 rounded"
               />
               {actionData?.errors?.password && (
                 <div className="pt-1 text-red-700" id="password-error">
@@ -143,12 +143,12 @@ export default function Join() {
           <input type="hidden" name="redirectTo" value={redirectTo} />
           <button
             type="submit"
-            className="w-full rounded bg-blue-500  py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
+            className="w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 focus:bg-blue-400"
           >
             Create Account
           </button>
           <div className="flex items-center justify-center">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-sm text-center text-gray-500">
               Already have an account?{" "}
               <Link
                 className="text-blue-500 underline"
diff --git a/scripts/playground/template/app/routes/login.tsx b/scripts/playground/template/app/routes/login.tsx
index 020ac7d7b55..d27528b976e 100644
--- a/scripts/playground/template/app/routes/login.tsx
+++ b/scripts/playground/template/app/routes/login.tsx
@@ -1,4 +1,4 @@
-import type { ActionArgs, LoaderArgs, V2_MetaFunction } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
 import * as React from "react";
@@ -58,7 +58,7 @@ export async function action({ request }: ActionArgs) {
   });
 }
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Login" }];
 };
 
@@ -78,8 +78,8 @@ export default function LoginPage() {
   }, [actionData]);
 
   return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
+    <div className="flex flex-col justify-center min-h-full">
+      <div className="w-full max-w-md px-8 mx-auto">
         <Form method="post" className="space-y-6">
           <div>
             <label
@@ -99,7 +99,7 @@ export default function LoginPage() {
                 autoComplete="email"
                 aria-invalid={actionData?.errors?.email ? true : undefined}
                 aria-describedby="email-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                className="w-full px-2 py-1 text-lg border border-gray-500 rounded"
               />
               {actionData?.errors?.email && (
                 <div className="pt-1 text-red-700" id="email-error">
@@ -125,7 +125,7 @@ export default function LoginPage() {
                 autoComplete="current-password"
                 aria-invalid={actionData?.errors?.password ? true : undefined}
                 aria-describedby="password-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                className="w-full px-2 py-1 text-lg border border-gray-500 rounded"
               />
               {actionData?.errors?.password && (
                 <div className="pt-1 text-red-700" id="password-error">
@@ -138,7 +138,7 @@ export default function LoginPage() {
           <input type="hidden" name="redirectTo" value={redirectTo} />
           <button
             type="submit"
-            className="w-full rounded bg-blue-500  py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
+            className="w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 focus:bg-blue-400"
           >
             Log in
           </button>
@@ -148,16 +148,16 @@ export default function LoginPage() {
                 id="remember"
                 name="remember"
                 type="checkbox"
-                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
               />
               <label
                 htmlFor="remember"
-                className="ml-2 block text-sm text-gray-900"
+                className="block ml-2 text-sm text-gray-900"
               >
                 Remember me
               </label>
             </div>
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-sm text-center text-gray-500">
               Don't have an account?{" "}
               <Link
                 className="text-blue-500 underline"
diff --git a/scripts/playground/template/app/routes/notes.tsx b/scripts/playground/template/app/routes/notes.tsx
index c7267ef9967..767f8a0e113 100644
--- a/scripts/playground/template/app/routes/notes.tsx
+++ b/scripts/playground/template/app/routes/notes.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs, V2_MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 
@@ -12,7 +12,7 @@ export async function loader({ request }: LoaderArgs) {
   return json({ noteListItems });
 }
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Remix Notes" }];
 };
 
@@ -21,8 +21,8 @@ export default function NotesPage() {
   let user = useUser();
 
   return (
-    <div className="flex h-full min-h-screen flex-col">
-      <header className="flex items-center justify-between bg-slate-800 p-4 text-white">
+    <div className="flex flex-col h-full min-h-screen">
+      <header className="flex items-center justify-between p-4 text-white bg-slate-800">
         <h1 className="text-3xl font-bold">
           <Link to=".">Notes</Link>
         </h1>
@@ -30,7 +30,7 @@ export default function NotesPage() {
         <Form action="/logout" method="post">
           <button
             type="submit"
-            className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
+            className="px-4 py-2 text-blue-100 rounded bg-slate-600 hover:bg-blue-500 active:bg-blue-600"
           >
             Logout
           </button>
@@ -38,7 +38,7 @@ export default function NotesPage() {
       </header>
 
       <main className="flex h-full bg-white">
-        <div className="h-full w-80 border-r bg-gray-50">
+        <div className="h-full border-r w-80 bg-gray-50">
           <Link to="new" className="block p-4 text-xl text-blue-500">
             + New Note
           </Link>
diff --git a/scripts/playground/template/app/routes/notes/$noteId.tsx b/scripts/playground/template/app/routes/notes/$noteId.tsx
index 8b37fe7c35d..5c993c14544 100644
--- a/scripts/playground/template/app/routes/notes/$noteId.tsx
+++ b/scripts/playground/template/app/routes/notes/$noteId.tsx
@@ -1,4 +1,4 @@
-import type { V2_MetaFunction, ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { MetaFunction, ActionArgs, LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useCatch, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
@@ -16,7 +16,7 @@ export async function loader({ request, params }: LoaderArgs) {
   return json({ note });
 }
 
-export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [{ title: "Note: " + data.note.title }];
 };
 
@@ -40,7 +40,7 @@ export default function NoteDetailsPage() {
       <Form method="post">
         <button
           type="submit"
-          className="rounded bg-blue-500  py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
+          className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 focus:bg-blue-400"
         >
           Delete
         </button>
diff --git a/scripts/playground/template/app/routes/notes/index.tsx b/scripts/playground/template/app/routes/notes/index.tsx
index d75ec7fdf0c..033d247eafa 100644
--- a/scripts/playground/template/app/routes/notes/index.tsx
+++ b/scripts/playground/template/app/routes/notes/index.tsx
@@ -1,7 +1,7 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Remix Notes" }];
 };
 
diff --git a/scripts/playground/template/app/routes/notes/new.tsx b/scripts/playground/template/app/routes/notes/new.tsx
index e6e8018cddd..450fe02a37c 100644
--- a/scripts/playground/template/app/routes/notes/new.tsx
+++ b/scripts/playground/template/app/routes/notes/new.tsx
@@ -1,4 +1,4 @@
-import type { ActionArgs, V2_MetaFunction } from "@remix-run/node";
+import type { ActionArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 import * as React from "react";
@@ -32,7 +32,7 @@ export async function action({ request }: ActionArgs) {
   return redirect(`/notes/${note.id}`);
 }
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{ title: "Create a Note" }];
 };
 
@@ -60,12 +60,12 @@ export default function NewNotePage() {
       }}
     >
       <div>
-        <label className="flex w-full flex-col gap-1">
+        <label className="flex flex-col w-full gap-1">
           <span>Title: </span>
           <input
             ref={titleRef}
             name="title"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 px-3 text-lg leading-loose border-2 border-blue-500 rounded-md"
             aria-invalid={actionData?.errors?.title ? true : undefined}
             aria-errormessage={
               actionData?.errors?.title ? "title-error" : undefined
@@ -80,13 +80,13 @@ export default function NewNotePage() {
       </div>
 
       <div>
-        <label className="flex w-full flex-col gap-1">
+        <label className="flex flex-col w-full gap-1">
           <span>Body: </span>
           <textarea
             ref={bodyRef}
             name="body"
             rows={8}
-            className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
+            className="flex-1 w-full px-3 py-2 text-lg leading-6 border-2 border-blue-500 rounded-md"
             aria-invalid={actionData?.errors?.body ? true : undefined}
             aria-errormessage={
               actionData?.errors?.body ? "body-error" : undefined
@@ -103,7 +103,7 @@ export default function NewNotePage() {
       <div className="text-right">
         <button
           type="submit"
-          className="rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
+          className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 focus:bg-blue-400"
         >
           Save
         </button>
diff --git a/scripts/playground/template/remix.config.js b/scripts/playground/template/remix.config.js
index d88ac009675..a2074b02762 100644
--- a/scripts/playground/template/remix.config.js
+++ b/scripts/playground/template/remix.config.js
@@ -2,7 +2,4 @@
 module.exports = {
   cacheDirectory: "./node_modules/.cache/remix",
   ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
-  future: {
-    v2_meta: true,
-  },
 };
diff --git a/templates/arc/app/routes/_index.tsx b/templates/arc/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/arc/app/routes/_index.tsx
+++ b/templates/arc/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/arc/remix.config.js b/templates/arc/remix.config.js
index 310cfa560fd..4fcffb4f128 100644
--- a/templates/arc/remix.config.js
+++ b/templates/arc/remix.config.js
@@ -11,7 +11,6 @@ export default {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/cloudflare-pages/app/routes/_index.tsx b/templates/cloudflare-pages/app/routes/_index.tsx
index 91cc813dd10..4aa6089f125 100644
--- a/templates/cloudflare-pages/app/routes/_index.tsx
+++ b/templates/cloudflare-pages/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/cloudflare";
+import type { MetaFunction } from "@remix-run/cloudflare";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/cloudflare-pages/remix.config.js b/templates/cloudflare-pages/remix.config.js
index c5005a25e29..f389db27899 100644
--- a/templates/cloudflare-pages/remix.config.js
+++ b/templates/cloudflare-pages/remix.config.js
@@ -17,7 +17,6 @@ export default {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/cloudflare-workers/app/routes/_index.tsx b/templates/cloudflare-workers/app/routes/_index.tsx
index 91cc813dd10..4aa6089f125 100644
--- a/templates/cloudflare-workers/app/routes/_index.tsx
+++ b/templates/cloudflare-workers/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/cloudflare";
+import type { MetaFunction } from "@remix-run/cloudflare";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/cloudflare-workers/remix.config.js b/templates/cloudflare-workers/remix.config.js
index b5866e0a1b4..10de61ed940 100644
--- a/templates/cloudflare-workers/remix.config.js
+++ b/templates/cloudflare-workers/remix.config.js
@@ -19,7 +19,6 @@ export default {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/deno/app/routes/_index.tsx b/templates/deno/app/routes/_index.tsx
index 843b77d4c74..2e62fab6222 100644
--- a/templates/deno/app/routes/_index.tsx
+++ b/templates/deno/app/routes/_index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { V2_MetaFunction } from "@remix-run/deno";
+import type { MetaFunction } from "@remix-run/deno";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/deno/remix.config.js b/templates/deno/remix.config.js
index deee56e1864..2b0aac4ca68 100644
--- a/templates/deno/remix.config.js
+++ b/templates/deno/remix.config.js
@@ -20,7 +20,6 @@ module.exports = {
   // publicPath: "/build/",
   future: {
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/express/app/routes/_index.tsx b/templates/express/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/express/app/routes/_index.tsx
+++ b/templates/express/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/express/remix.config.js b/templates/express/remix.config.js
index ccaabb773a4..70bbe03afc6 100644
--- a/templates/express/remix.config.js
+++ b/templates/express/remix.config.js
@@ -10,7 +10,6 @@ export default {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/fly/app/routes/_index.tsx b/templates/fly/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/fly/app/routes/_index.tsx
+++ b/templates/fly/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/fly/remix.config.js b/templates/fly/remix.config.js
index 0bd3fd95c8a..012b1698e9f 100644
--- a/templates/fly/remix.config.js
+++ b/templates/fly/remix.config.js
@@ -10,7 +10,6 @@ module.exports = {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/netlify/app/routes/_index.tsx b/templates/netlify/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/netlify/app/routes/_index.tsx
+++ b/templates/netlify/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/netlify/remix.config.js b/templates/netlify/remix.config.js
index abf7871a9fc..f1283a05379 100644
--- a/templates/netlify/remix.config.js
+++ b/templates/netlify/remix.config.js
@@ -14,7 +14,6 @@ module.exports = {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/remix-javascript/remix.config.js b/templates/remix-javascript/remix.config.js
index 30d26861b22..510ea667a65 100644
--- a/templates/remix-javascript/remix.config.js
+++ b/templates/remix-javascript/remix.config.js
@@ -8,7 +8,6 @@ module.exports = {
   serverModuleFormat: "cjs",
   future: {
     v2_errorBoundary: true,
-    v2_meta: true,
     v2_normalizeFormMethod: true,
     v2_routeConvention: true,
   },
diff --git a/templates/remix/app/routes/_index.tsx b/templates/remix/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/remix/app/routes/_index.tsx
+++ b/templates/remix/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/remix/remix.config.js b/templates/remix/remix.config.js
index 0bd3fd95c8a..012b1698e9f 100644
--- a/templates/remix/remix.config.js
+++ b/templates/remix/remix.config.js
@@ -10,7 +10,6 @@ module.exports = {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };
diff --git a/templates/vercel/app/routes/_index.tsx b/templates/vercel/app/routes/_index.tsx
index 5352b9722f2..5347369230e 100644
--- a/templates/vercel/app/routes/_index.tsx
+++ b/templates/vercel/app/routes/_index.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
diff --git a/templates/vercel/remix.config.js b/templates/vercel/remix.config.js
index 564f8cee51d..3da740b468a 100644
--- a/templates/vercel/remix.config.js
+++ b/templates/vercel/remix.config.js
@@ -14,7 +14,6 @@ module.exports = {
     v2_dev: true,
 
     v2_headers: true,
-    v2_meta: true,
     v2_routeConvention: true,
   },
 };

From 37b5865c665065db4c0fa02613b619ea95aba9c8 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Wed, 26 Jul 2023 18:11:03 +1000
Subject: [PATCH 2/8] update changeset

---
 .changeset/remove-v1-meta.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/remove-v1-meta.md b/.changeset/remove-v1-meta.md
index 2896e4c2d31..9e3474d43e4 100644
--- a/.changeset/remove-v1-meta.md
+++ b/.changeset/remove-v1-meta.md
@@ -1,5 +1,4 @@
 ---
-"remix": major
 "@remix-run/cloudflare": major
 "@remix-run/deno": major
 "@remix-run/dev": major

From 2e5abe0abb88ecb532715899ae89c5fa4d417f57 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Thu, 27 Jul 2023 10:08:32 +1000
Subject: [PATCH 3/8] fix typos

---
 docs/guides/migrating-react-router-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md
index e81570df818..61b39bdd536 100644
--- a/docs/guides/migrating-react-router-app.md
+++ b/docs/guides/migrating-react-router-app.md
@@ -658,7 +658,7 @@ Similar to `links`, each route can also export a `meta` function that returns va
 The behavior for `meta` is slightly different from `links`. Instead of merging values from other `meta` functions in the route hierarchy, **each leaf route is responsible for rendering its own tags**. This is because:
 
 - You often want more fine-grained control over metadata for optimal SEO
-- In the case of some tags that follow the [Open Graph protocol](https://ogp.me/), the ordering of some tags impacts their how they are interpreted by crawlers and social media sites, and its it's less predictable for Remix to assume how complex metadata should be merged
+- In the case of some tags that follow the [Open Graph protocol](https://ogp.me/), the ordering of some tags impacts how they are interpreted by crawlers and social media sites, and it's less predictable for Remix to assume how complex metadata should be merged
 - Some tags allow for multiple values while others do not, and Remix shouldn't assume how you want to handle all of those cases
 
 ### Updating imports

From da2c2c12cdf5950be29946fd01507272ccba2583 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 31 Jul 2023 11:05:10 +1000
Subject: [PATCH 4/8] Update docs/guides/styling.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
---
 docs/guides/styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guides/styling.md b/docs/guides/styling.md
index fe5c614ee5d..6cf0c30ab53 100644
--- a/docs/guides/styling.md
+++ b/docs/guides/styling.md
@@ -580,7 +580,7 @@ Here's some sample code to show how you might use Styled Components with Remix (
 
 1. First you'll need to put a placeholder in your root component to control where the styles are inserted.
 
-   ```tsx filename=app/root.tsx lines=[22-24]
+   ```tsx filename=app/root.tsx lines=[21-23]
    import {
      Links,
      LiveReload,

From 6a98008615dc2fef67f1b1f145d0cf4fcefe27e2 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 31 Jul 2023 11:18:01 +1000
Subject: [PATCH 5/8] fix route paths

---
 docs/route/meta.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/route/meta.md b/docs/route/meta.md
index ad8a6b4b73e..c04828d7edd 100644
--- a/docs/route/meta.md
+++ b/docs/route/meta.md
@@ -114,8 +114,8 @@ The route's URL params. See [Dynamic Segments in the Routing Guide][url-params].
 
 In addition to the current route's data, often you'll want to access data from a route higher up in the route hierarchy. You can look it up by its route ID in `matches`.
 
-```tsx filename=routes/project/$pid/tasks/$tid.tsx
-import type { loader as projectDetailsLoader } from "../../../$pid";
+```tsx filename=app/routes/project.$pid.tasks.$tid.tsx
+import type { loader as projectDetailsLoader } from "./project.$pid";
 
 export async function loader({ params }: LoaderArgs) {
   return json({ task: await getTask(params.tid) });
@@ -123,10 +123,10 @@ export async function loader({ params }: LoaderArgs) {
 
 export const meta: MetaFunction<
   typeof loader,
-  { "routes/project/$pid": typeof projectDetailsLoader }
+  { "routes/project.$pid": typeof projectDetailsLoader }
 > = ({ data, matches }) => {
   const project = matches.find(
-    (match) => match.id === "routes/project/$pid"
+    (match) => match.id === "routes/project.$pid"
   ).project;
   const task = data.task;
   return [{ title: `${project.name}: ${task.name}` }];
@@ -161,7 +161,7 @@ export const meta: MetaFunction = () => {
 };
 ```
 
-```tsx bad filename=app/routes/projects/$id.tsx
+```tsx bad filename=app/routes/projects.$id.tsx
 export const meta: MetaFunction<typeof loader> = ({
   data,
 }) => {

From 8f845538e1f8cf62d02f2ee1e894301846bea6f6 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 31 Jul 2023 11:44:32 +1000
Subject: [PATCH 6/8] add v2_dev option back to hmr test

---
 integration/hmr-log-test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts
index 429e27c6dbe..9af821b85cc 100644
--- a/integration/hmr-log-test.ts
+++ b/integration/hmr-log-test.ts
@@ -13,6 +13,11 @@ test.setTimeout(120_000);
 let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
   config: {
     serverModuleFormat: "cjs",
+    future: {
+      v2_dev: {
+        port: options.devPort,
+      },
+    },
   },
   files: {
     "package.json": json({

From 16c2664f41e72491399fe496a2e26cd8a3a9b6ba Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 31 Jul 2023 12:49:11 +1000
Subject: [PATCH 7/8] Update docs/route/meta.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
---
 docs/route/meta.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/route/meta.md b/docs/route/meta.md
index 393a156f3f1..0abafbe963b 100644
--- a/docs/route/meta.md
+++ b/docs/route/meta.md
@@ -141,7 +141,7 @@ Remix will take the last matching route with a meta export and use that. This al
 
 This can get quite tricky when you're new.
 
-Consider a route like `/projects/123`, there are likely three matching routes: `root.tsx`, `projects.tsx`, and `projects/$id.tsx`. All three may export meta descriptors.
+Consider a route like `/projects/123`, there are likely three matching routes: `app/root.tsx`, `app/routes/projects.tsx`, and `app/routes/projects.$id.tsx`. All three may export meta descriptors.
 
 ```tsx bad filename=app/root.tsx
 export const meta: MetaFunction = () => {

From 4d50ffc83e65997d7aac8bf1d81057519dc848dc Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Tue, 1 Aug 2023 08:56:55 +1000
Subject: [PATCH 8/8] remove future flags from API dev docs

---
 docs/pages/api-development-strategy.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/docs/pages/api-development-strategy.md b/docs/pages/api-development-strategy.md
index da763fe11a0..0474ac81fe4 100644
--- a/docs/pages/api-development-strategy.md
+++ b/docs/pages/api-development-strategy.md
@@ -48,12 +48,5 @@ The lifecycle is thus either:
 - Breaking + Stable API Feature -> `future.v2_` flag in current major -> Default behavior in next major
 - Breaking + Unstable API -> `future.unstable_` flag in current major -> `future.v2_` flag in current major -> Default behavior in next major
 
-## Current Future Flags
-
-| Flag      | Description                                                   |
-| --------- | ------------------------------------------------------------- |
-| `v2_dev`  | Enable the new development server (including HMR/HDR support) |
-| `v2_meta` | Enable the new API for your `meta` functions                  |
-
 [future-flags-blog-post]: https://remix.run/blog/future-flags
 [feature-flowchart]: /docs-images/feature-flowchart.png