1/3/2024 0 Comments Nextjs sitemap![]() The array of all website pages is created by combining these slugs with a set of hardcoded pages, including the homepage, blog page, about page, and contact page. The function uses readdirSync to read the contents of the content directory and then converts the file names into an array of slugs by mapping them over and deleting the. It takes an object with a res property, which is the server response object. The getServerSideProps function is a special function in Next.js that runs on the server when a page is requested. The resulting XML is returned as a string. For each slug, a URL element is created using template literals by mapping over the slugs. The XML sitemap's content is generated by the createSitemap function using an array of slugs as its input. These functions will be used to read the contents of the content directory and join the file paths together. ![]() The code starts by importing the readdirSync and join functions from the fs and path modules, respectively. Let's break down the code and see how it generates the sitemap. Now when you either run yarn dev or yarn build the sitemap.xml file will be generated and placed into the /public/sitemap.xml folder ready to be served by along with the correct tags for each of your blog articles.Pages/ import Understanding the Code The 2nd function of concern is the listBlogsSitemaps() function - this file reads our Markdown blog files, and creates the xml for the sitemap dynamically. The 2 main functions in this file are first the regularPages() function, which contains an object with File paths along with the route name, these are our static files There is more info about this here - this means that some functions are repeated in stead of re-used from our blogs-util.ts if you've been following along to my other article Markdown Blogs with Next JS and Typescript JavaScript and not Typescript - this is due to the NextJS file itself being JavaScript. Please note - annoyingly for now the sitemap-generator.js file must be NextJS Config Updateįirst we need to look at updating our file with the following (See START and END): const nextConfig = įs.readdirSync(path.join(process.cwd(), 'markdown-blogs'), 'utf8') Ĭonst regPages = await (await regularPages(SITE_ROUTE)).join('')Ĭonst blogs = await (await listBlogsSitemaps(SITE_ROUTE)).join('') įs.writeFileSync('public/sitemap.xml', sitemap) public/sitemap.xml file on either our yarn dev or yarn build commands locally, and then it can easily be pushed to our repo ready to be built server side. ![]() NextJS allows us to easily create static files by placing them into the /public/ folder, so what we are going to do here is utilize webpack to generate our To also show the correct Date in the tag whenever I edit one of my markdown files. System creating dynamic pages is a walk in the park.Ī small issue I recently ran into however was on this website while building my dynamic blog pages, I use Markdown files to generate each blog page - and I needed a way of having a sitemap.xml file that picked up these pages dynamically as well, on top of that I wanted my sitemap.xml file I absolutely love NextJS, as a React developer it allows you to rapidly build your website/application much quicker than a bare-bones React app, and with it's built in routing ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |