12/30/2023 0 Comments Nextjs sitemapand replace the WordPress URL with the current site URL.Ĭontent = replace(content, HOSTNAME_REGEX, FRONTEND_URL) Find any URLS inside the XML content that include "sitemap", If the current URL includes 'sitemap'. There are no redirects, get original response text.ĬontentType = ('content-type') Return args.length 300 & upstreamRes.status < 310) to avoid redirect loops` ' // Global regex search allows replacing all URLsĬonst HOSTNAME_REGEX = new RegExp(WORDPRESS_URL, 'g') ''Ĭonst FRONTEND_URL = _PUBLIC_FRONTEND_DOMAIN // e.g. import fetch from 'isomorphic-unfetch' Ĭonst WORDPRESS_URL = _PUBLIC_WORDPRESS_DOMAIN // e.g. This is a helpful wrapper for fetch that works on both client/server side.Īdd the below code to your sitemap-proxy.js file. Install a Packageįor the proxy to work, you will need to install a package. This creates a server side function that we can use via ‘/api/sitemap-proxy’. Create the API fileĬreate a file named sitemap-proxy.js within /pages/api/. The purpose of this is to get the sitemap file contents from WordPress and serve it on your domain. The next step in using the Yoast sitemap from a headless WordPress install inside of Next JS is to create a proxy. The first step is to create an XML template that our Yoast sitemap content can be injected into.ĭownload the XML file from this GitHub gist and add it to your /public folder. If you are new to Next JS, I really recommend taking a look at this great course - Next.js 13 Bootcamp. This solution was inspired by how the Patronage bubs-next starter handles their sitemaps. This is created as ‘sitemap_index.xml’ and then WordPress redirects it to ‘sitemap.xml’. Yoast also generates its own sitemap XML. It makes handling a pages SEO far simpler, and content teams have usually worked with it before. The SolutionĮvery headless WordPress site I build generally has Yoast installed. We need to know where the file is to be sent. Especially if this is the first time the site has been built. My concern with this is that when hosting Next JS with Vercel/Netlify etc. Grab all the site data with a GraphlQl query.Run a query before the whole ISR build kicks off.It is also overkill to re-build a whole site for one piece of content. We would see builds failing as Vercel/Netlify (your build tool of choice) timed out. The build times will get longer as the content grows. Unfortunately this isn’t a great solution. This would generate a clean and up-to-date site map. Rebuild the whole site using SSG every time content changes. We could: Rebuild the whole site with SSG We also need the sitemap to be updated after each publish, edit or deletion of content. As well as this, content gets published regularly. Myself and the clients I work with tend to build sites that are very content heavy, and with lots of images. But only if you are not wanting to use ISR, and are happy to rebuild the whole site on each content change.Ĭreate a lightweight proxy that grabs the Yoast sitemap data, points it to your Next JS domain, and rewrite any internal URLS to that same domain. You could use a plugin like next-sitemap to do the hard work for you. You could generate the XML by grabbing all the URLs with custom code. Especially when using WordPress as a headless CMS. There are many perfectly valid ways of creating sitemaps for Next JS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |