diff --git a/packages/app-next/src/App.tsx b/packages/app-next/src/App.tsx
index 4d72cca14f..03fa03cfb3 100644
--- a/packages/app-next/src/App.tsx
+++ b/packages/app-next/src/App.tsx
@@ -26,6 +26,7 @@ import {
 } from '@backstage/frontend-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
+import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha';
 
 /*
 
@@ -59,7 +60,7 @@ TODO:
 const entityPageExtension = createPageExtension({
   id: 'catalog:entity',
   defaultPath: '/catalog/:namespace/:kind/:name',
-  routeRef: entityRouteRef,
+  routeRef: convertLegacyRouteRef(entityRouteRef),
   loader: async () => <div>Just a temporary mocked entity page</div>,
 });
 
diff --git a/packages/app-next/src/examples/pagesPlugin.tsx b/packages/app-next/src/examples/pagesPlugin.tsx
index ef6b55ff4c..6e040c2faf 100644
--- a/packages/app-next/src/examples/pagesPlugin.tsx
+++ b/packages/app-next/src/examples/pagesPlugin.tsx
@@ -19,18 +19,16 @@ import { Link } from '@backstage/core-components';
 import {
   createPageExtension,
   createPlugin,
-} from '@backstage/frontend-plugin-api';
-import {
-  useRouteRef,
   createRouteRef,
   createExternalRouteRef,
-} from '@backstage/core-plugin-api';
+  useRouteRef,
+} from '@backstage/frontend-plugin-api';
 import { Route, Routes } from 'react-router-dom';
 
-const indexRouteRef = createRouteRef({ id: 'index' });
-const page1RouteRef = createRouteRef({ id: 'page1' });
-export const externalPageXRouteRef = createExternalRouteRef({ id: 'pageX' });
-export const pageXRouteRef = createRouteRef({ id: 'pageX' });
+const indexRouteRef = createRouteRef();
+const page1RouteRef = createRouteRef();
+export const externalPageXRouteRef = createExternalRouteRef();
+export const pageXRouteRef = createRouteRef();
 // const page2RouteRef = createSubRouteRef({
 //   id: 'page2',
 //   parent: page1RouteRef,