To extract WordPress menus into Next.js JSON, treat the menu as its own piece of data, because it is not in the normal content export. Expose it through the WordPress REST API as structured JSON, a label, URL, parent, and order for each item, or read it from the rendered navigation when the API route is not available, then render that JSON in your Next.js front end. The detail people miss is that the menu is also a dense set of internal links, so preserving its structure protects your SEO. WPBuildAI extracts the menus as clean JSON and preserves the internal-link graph during a rebuild.

Export against a known version rather than a moving one: WordPress 7.0 shipped on 20 May 2026 and reached 7.0.2 by 17 July, and menu structures are the kind of thing that survives an upgrade in the database but not always in the shape an API returns them.

Why menus need their own step

The reason menus get forgotten is that they live outside your content. When you export posts and pages, or take the XML backup, you get the content but not the navigation, because WordPress does not store the menu inside any post. So a migration that handles the content perfectly can still arrive on the new site with no menu at all, or with a hand-rebuilt one that quietly drops links. The 2024 Web Almanac shows how much of a site’s structure lives in this navigation layer rather than in the page content, which is exactly why a content export alone leaves your menus behind. Recognising the menu as a separate data object, one that needs its own extraction step, is the first move; everything else follows from treating it as data to capture rather than something that comes along automatically.

How WordPress stores menus

Knowing the storage model explains both why menus are separate and how to get them out cleanly. WordPress stores menus as a special taxonomy: each menu is a term, and each menu item is a small post that records a label, a link target (a page, a post, a category, or a custom URL), a parent (for submenus), and an order. So the menu is really a small tree of link records, held apart from the content it links to. This is good news for extraction, because that tree is structured data, not free text, so it can be pulled out as clean JSON that mirrors its shape. The WordPress REST API Handbook documents how to expose these menu structures, and understanding that a menu is a parented, ordered set of link items tells you exactly what your JSON needs to capture to rebuild it faithfully.

REST API or rendered nav

There are two routes to the menu, and you pick by what is available. Use the REST API when the menu endpoint is exposed: it returns the full hierarchy with parents and order intact as structured JSON, which is the cleanest possible source because it is the data itself, not a rendering of it. Some WordPress setups do not expose menus on the API by default, in which case the fallback is to read the rendered navigation from the live site, since the nav still displays every link even when the API route is off. Reading the rendered nav means parsing the HTML back into structure, which is more work and easier to get subtly wrong, so it is the fallback, not the first choice. Either way, the target is the same: the full menu tree as JSON, with hierarchy preserved, which is the navigation-specific case of the broader work in connecting an AI builder to headless WordPress and making WordPress headless.

What the JSON should contain

A useful menu export captures more than a flat list of links. For each item, record the label (the visible text), the URL (the link target), the parent (so submenus nest correctly), and the order (so items sit in the right sequence). Capturing the parent and order is what makes the difference between a faithful menu and a broken one: drop the parent relationships and your dropdowns flatten into a single level; drop the order and items shuffle. Where a menu item points at internal content, it is worth noting what it targets (a page, a category) so the link can be re-pointed to the new URL if the slug changes. The result is a JSON tree that mirrors the WordPress menu exactly, which a Next.js component can walk to render the navigation. Aiming for the full structured tree, not a flat link list, is the single most important thing to get right, because the hierarchy is the part that is hard to reconstruct later.

A worked example: a nested nav into Next.js

Picture a site with a two-level main menu: top-level items like Products, Solutions, and About, each with a dropdown of sub-items. Pulled from the REST API, this comes back as JSON where each top-level item has a label, URL, and order, and the sub-items carry a parent pointing at their top-level item plus their own order. In Next.js, a single navigation component receives that JSON, maps over the top-level items, and for each renders its children from the items whose parent matches, producing the same nested dropdown structure. Because the JSON preserved parents and order, the rebuilt nav matches the original exactly, every link present, every dropdown intact, every item in sequence. Had the export flattened the tree, the team would have faced rebuilding the hierarchy by hand from memory, which is both tedious and error-prone. The structured extraction is what made the Next.js nav a faithful, automatic rebuild rather than a manual reconstruction.

The reason menu extraction matters beyond convenience is that your main navigation is one of the densest sets of internal links on the entire site, and internal links are an SEO asset. The nav links from every page to your most important pages, which shapes how authority flows through the site and how crawlers discover and prioritise content. Backlinko’s analysis of 11.8 million search results underlines how much internal linking and site structure matter to ranking, so a rebuilt menu that drops links, changes targets, or flattens the hierarchy quietly weakens the internal-link graph and, with it, your SEO. Preserving the menu structure and the exact link targets is therefore not just about visual fidelity; it is about keeping the internal-link equity the navigation carried. This is the same completeness principle as mapping a site’s structure and exporting data for a structured backend: capture the whole graph, not a sample.

Rendering the menu in Next.js

Getting the menu into JSON is half the job; rendering it in Next.js so crawlers see it is the other half. The pitfall is rendering the navigation only on the client, fetching the menu JSON in the browser and building the nav there, which means a crawler that does not run JavaScript receives a page with no navigation links, the failure Google describes in its JavaScript SEO basics. Since the nav is your densest internal-link set, hiding it from crawlers is a real SEO loss. The fix is to render the menu server-side, statically at build time or with server rendering, so the navigation links are present in the HTML on first load. Next.js supports this directly. So the rule mirrors the broader headless SEO rule: get the menu as structured JSON, then render it on the server, so the internal links are in the delivered HTML where crawlers and AI engines can follow them.

Common mistakes extracting menus

The recurring errors all come from treating the menu casually. Assuming the content export includes the menu leaves the new site with no navigation, since menus are stored separately. Capturing a flat list of links instead of the parented, ordered tree breaks dropdowns and sequence. Hand-rebuilding the nav from memory drops links and changes targets, weakening internal linking. Reading the rendered nav when the clean REST API was available introduces parsing errors for no reason. And rendering the menu client-side in Next.js hides the internal links from crawlers. Each is avoided by the same approach: extract the menu as its own structured JSON tree (REST API first, rendered nav as fallback) capturing label, URL, parent, and order, re-point any changed link targets, and render it server-side, which preserves both the navigation and the internal-link equity it carries.

Key points to remember

Extract WordPress menus into Next.js JSON as a dedicated step, because menus are stored as a separate taxonomy and never appear in the content export. Pull the menu from the REST API as a structured tree, label, URL, parent, and order per item, with the rendered navigation as a fallback when the API route is not exposed, and capture the full hierarchy rather than a flat list so dropdowns and sequence survive. Treat the menu as SEO, not just layout: it is your densest internal-link set, so preserve the structure and link targets, re-pointing any that change, and render it server-side in Next.js so crawlers see the links. WPBuildAI extracts the menus as clean JSON and keeps the internal-link graph, so the Next.js front end rebuilds your navigation without losing link equity; send your site URL for a fixed quote.

Not affiliated with WordPress, Next.js, or Lovable.