NextJS 13 Tutorial: Create a Static Blog from Markdown Files

[@maker._]

Front end dev here, for about 8 years... this was very well done, thank you!

[@pixegami]

Wow, thank you :)

[@kanhakesarwani971]

Hey @pixegami. Amazing tutorial, everything worked smooth as butter. However, I really wanted to implement a filter based on metadata. I have been having errors while implementing the same, I have been stuck for quite some days now. I also tried to connect with you on reddit. Can you please respond? Any help would be greatly appreciated.

[@pixegami]

Glad you enjoyed the tutorial and even pushed beyond to implement a filter. I don't know how helpful I'll be with helping you since I usually don't have a ton of time to ramp up on context of the problem. Do you mind sharing a GitHub with the code, describing what you're trying to do, and what error you're running into?

[@tsykin]

Great project for beginners! I have built it myself and I am fascinated by deployed website's speed. You can truly see the benefit of static blog with this project.

[@pixegami]

Thanks, glad you found it useful :)

[@VladyslavDihtiarenko]

Thanks for the video! Super straightforward and easy to follow. I have a Notion-driven blog on my Next.js website, but thinking about moving to the markdown approach, because of some of the notion's limitations and issues.

[@Franx570]

I really like that you make end-to-end projects explanations. Liking every video of yours rn

[@pixegami]

Glad you like like! I enjoy end-to-end content too, because you end up with something you can actually use. More is on the way!

[@dundasbrands]

Great explanation! Not just how to complete the project but why it works!

[@pixegami]

Thank you! Glad it was helpful :)

[@OscarMartinez-nt6zn]

Thanks for this video! I watched it end to end and I could set up my blog without much issue.

[@VP-nd9yy]

This is great. Really explains the thought process behind making the app.

[@pixegami]

Thank you!

[@minhnhatnguyen8200]

I don't know the newest next have changed any thing yet but your tutorial's very comprehensible , i just subscribed hope too see more knowledge about nextjs 13 like this

[@pixegami]

Thanks! I plan to make more tutorials for sure, so stay tuned :)

[@mathewsjoy8464]

Hey man really liking you’re videos recently! Would be cool to see a full setup video, e.g what equipment you use and what of specs etc. Also a python full pipeline data science/ analysis video would be awesome!

[@pixegami]

Thanks for the idea! I'm a bit rusty on data science these days, but I plan to do a run of "Python theme" content next quarter so I'm sure I can plan some setup and DS content in. Any technology or problem domain in particular?

[@mathewsjoy8464]

@@pixegami nothing specfic, but something to do with pandas, some visualisation library, or even a tool like tableau/powerbi

[@faisaltariq-un6so]

tysm for this hands down the best tutorial on earth we need more next js projects

[@pixegami]

Thanks for the feedback! There'll be more to come :)

[@TravisHi_YT]

Hey man, thanks so much for this, thanks to you I was able to use this for grabbing Decap data!

[@pixegami]

You're welcome! I don't know what Decap data is, but glad it helped :)

[@arnoldas9730]

It's truly the best video on how to make blog website. Thanks a lot

[@TienBui-wl2pn]

Awesome, thank you a lot for making a useful content for novice people like me to get familiar with Nextjs. I learnt a lot from that.

[@pixegami]

Glad it was helpful!

[@hezroncreations]

You made this look so easy. I'm motivated😊

[@pixegami]

You can do it!

[@Thing1Thing11]

Thank you so much. I was looking for a way to display my md notes made in obsidian on a blog and this is just amazing! Im going to try to explore how to display folders now

[@pixegami]

Glad to hear that!

[@GmrDad82]

Awesome tutorial @pixegami! 🎉

[@pixegami]

Thanks!

[@IngGu99]

Thank you, I finally took my first step

[@pixegami]

Keep going!

[@waseemseoofficial]

That's Awesome, If you make tutorial series on js and next js from scratch to learn it more efficiently. Thank you

[@pixegami]

I'm not actually very strong at Typescript so I'll need to do a lot of learning myself first before I can do that. But I plan to make a Python beginner series soon, so I can look into Typescript after that.

[@waseemseoofficial]

@@pixegami Hmm, Thank you keep it up

[@dylansmith1650]

this was insanely helpful, thank you so much

[@pixegami]

Glad to hear that!

[@TheFrankyGS]

Hi! Great tutorial, sadly, I have a problem with the deploy on Vercel. Everything in local works fine but for some reason Vercel can’t find my markdown files when the site is deployed. Can anybody help me please?

[@samuelh2005.]

I have the same issue for a similar project. This happens because when you deploy to Vercel it runs `npm run build` and it uses the build output instead, this does not contain original source files.

[@patite3103]

I get an error message Error: ENOENT: no such file or directory, scandir 'posts/' for the code const folder ="posts/". If you have the same error write folder = "app/posts/".

[@issam4737]

very nicely made Tutorial!

[@pixegami]

Thanks a lot!

[@acidopcodes]

Yoo nice tutorial. Any chance you can explain how to add pagination to the blogs page in this project if we have a large list of blogs?

[@DanielG0922]

Great video and very well explained. Appreciate it

[@angelhernandezpascual7773]

How can I sort my posts by date? maybe changing the matterResult object? Amazing video THANK YOU!

[@pixegami]

The matterResult should already have the date (matterResult.data.date) but I think you can just sort the "post" array before you return it here: github.com/pixegami/nextjs-blog-tutorial/blob/main/components/getPostMetadata.ts#L11

[@shv1n]

hey, I solved this by expanding on the final return posts line in getPostMetadata. I basically did posts.sort((a,b) => {if (a.date < b.date) { return 1} else {return -1}});. hopefully this helps you as it worked for me

[@migla2000]

@@shv1n Thank you very much, exactly what I was looking for :)

[@joaofernandes6349]

@@shv1n What a legend, exactly what was looking for as well! Thank you =)

[@tommymalm]

Thanks for a great tutorial, it was very helpful. You got a thumbs up and a sub :)

[@pixegami]

Awesome, thank you!

[@owkitsune]

Thank you for Korean support 👍

[@pixegami]

You're welcome! I'm hoping to support people all over the world in my videos (I hope my AI translated subtitles are good enough!)

[@user-po2iy4hq7v]

Thank you for korean support 2222

[@TheIpriest-fp2mk]

nice tutorial i just wanted to know is this blog monetizable like can i apply ads on the blog

[@pixegami]

Yup, you can add monetisation with something like Stripe if you wanted to build a blog platform. But if you just want to monetise your own personal blog, it's better/easier to just use an existing service like SubStack.

[@user-wu3hg3oh1p]

Amazing content! What's the icon extension you used for the vscode? That looks superb!

[@pixegami]

Hmm, I don't know if I use an icon extension - I think it might just come together with my Monokai Pro Theme?

[@ZhiziKnowHow]

Very nice course,let me explore the blog knowledge

[@pixegami]

Thanks!

[@zenshin288]

this is a very good tutorial, clearly explained! Thanks a lot! Just that with Vercel, the markdown pages cannot be rendered. when I check the log msg, it says cannot find the directory for the markdown files... am i the only want with this issue?

[@orlundokhubbard]

Only issue here is that I wouldn't run the getPostMetadata on the client side. That should be server side rendered. Otherwise you're going to get an error.

[@patite3103]

Great video! I am looking forward to a new video using Nextjs 13.2 with the same blog project but without markdown documents. Is there a possibility to write directly the blog in Nextjs?

[@fisix5151]

could you make a tutorial on how to add syntax highlighting to our code blocks? thanks!

[@pixegami]

Thanks for the suggestion. I haven't done front-end tutorials for a while, so I can't make any promises. But I'd probably recommend looking for a syntax-highlighting plugin on NPM: www.npmjs.com/search?q=syntax+highlighting

[@thrivingcreator]

I like how you set up each section by showing the problem to be solved. Question: With Next.js 13, it seems we can colocate components or other files directly in a particular page inside the `app` directory. In this project, you placed the `posts` (containing markdown files) at the root level... and you also have a `app/posts` directory... could you just place those markdown files inside `app/posts`? If so, what would be the pros and cons of that approach? Similar question for the images. Does Next.js have the ability to colocate image files in the directory that they are actually used? For example, could we place some images in a `app/posts/images` directory?

[@pixegami]

This is a really good question. Why put the post files into a separate directory than the "app/posts" directory, if NextJS supports it? Well, I think it's generally a good idea to colocate logical components for sure. BUT, I don't think of the "posts" data as actual components. The components (things in app/posts) are the logic and building blocks of the site. The "posts" are arbitrary content to be displayed. What if I want to make the blog into a template for others to use? Or I want to use the same blog code, but host all the content on a different server? Or sell the blog as a service, and have my customers able to upload their own set of content? If you think about it in this way, it makes much more sense to separate actual "content" from component logic, and so therefore I chose not to co-locate them. Hope this helps explain that decision a little more!

[@thrivingcreator]

I see, thank you for explaining your thinking about that! What about images... If a post is the only thing that uses a particular image, is there a way to store that image next to its respective post? Example: /posts/somePostDir/someImage.jpg So far I've only been able to place images in the 'public' directory since that seems to be where Next.js wants them. But I was wondering if you've found a way to place images next to where they are used (outside the public directory)?

[@kanhakesarwani971]

@@thrivingcreator hey, can you please help me with an error I'm facing pertaining to this blog application? I tried to add filter search based on metadata but I am unable to resolve the errors I am getting. Any help would be highly appreciated.

[@Lleanlleawrg]

Cool guide. I'm taking a somewhat different approach, very similar, but i'm using a strapi backend to serve content via get requests, so i've used async await fetch() which works pretty well. The original content is html. My own blog is just .. stuff that interests me, so there's a lot of embedded media like images, spotify playlists, google maps, youtube embeds, things like that, and I wanted to replace the tags with suitable components. I see there are some from react, but of course, with server side components, I can't use those. I could create client side components with "use client", but I'm not entirely clear on how. Likewise, I'm having some trouble getting nextjs to replace with component. I tried with Cheerio, but it didn't seem to work, so I'm clearly doing something wrong. I've read the nextjs13 documentation but still lacking the understanding to fully pull it off.

[@pixegami]

In your case, do you have an option to pull the content from Strapi as data directly? It feels unintuitive to me that the data would be pulled as HTML, then you need to "break it apart" and re-package it as JSX, which then gets turned into HTML anyway. I would first see if you could migrate the data type to be pure data or some form of mark-up, then consume that. Otherwise, I'd look into finding a library that can actually parse the entire HTML content, and let you traverse it programmatically to get the data that you want (BeautifulSoup4 in Python does this, but I'm not sure what the TS/JS equivalent is).

[@Lleanlleawrg]

@@pixegami probably better as pure data, or markup as you say. I had hoped to be able to keep the original because .. well, laziness I guess. It seems I did get it to work by parsing with cheerio though, but you make a good point about it not being very intuitive.

[@williambnull2083]

Great work! Could you show how to paginate the posts with Next13?

[@pixegami]

It's probably too much stuff to explain in one comment, but I remember there's a lot of different ways and tutorials on how you can do it: blog.logrocket.com/add-pagination-next-js-app/

[@davef.263]

Great tutorial, you explain everything very well. I am having an issue with the "/posts/" folder not being found. When I put the whole path it works. Are you doing something somewhere for it to assume the relative path? Thanks

[@pixegami]

Hmm, it's been a quite since I did the project, so I'm not 100% sure, but I don't think so. I think NextJS should really understand relative paths by default, so I'd recommend checking the diff between the settings and the code in the example project vs your project code.

[@emAyush56]

How are you able to use fs inside page.tsx? When I try to use it, I get an error and I needed to use it inside /api and the fetch it inside my page.

[@pixegami]

Hmm, what error do you get? I think I actually use it in a helper class here: github.com/pixegami/nextjs-blog-tutorial/blob/main/components/getPostMetadata.ts#L1 I wonder if something's different in the NextJS runtime you are using vs the one used in the video.

[@Tal_Art]

Hi. How do I configure routing for SSG correctly, because after the build I see 404 when I refresh the page with blog post. Thanks for the video!

[@sarfrazanwar6135]

How would you manage the post once it reaches around let's say 100 blogs ? Does more post leads to increase in chunk sizes of website ?

[@TheGogogogogogo]

I did the whole thing. Thanks so much for the tutorial and for providing the code as well. Great content :) Now how to do it with jsons instead of md files from through an api like a cms?

[@pixegami]

Thanks! You can fetch JSON files using the same concept as 'data-fetching' (that we used for the MD files). beta.nextjs.org/docs/data-fetching/fundamentals But it depends on the API and how often you expect the data to change. You can fetch it 'statically' when you build the site, and have the site content refresh with each build deployment (or build periodically). But if the updates are coming in fast, you could also look into nextjs.org/docs/basic-features/data-fetching/get-server-side-props which has options to fetch it at runtime.

[@alexlindgren1]

For some reason I don't get the rendering of the markdown to work, I've tried a clean next project and installing the latest one, as well as the same version of jsx-markdown package as you used but nothing is happening. However, cloning down your project and running it works fine... Any ideas?

[@pixegami]

Have you inspected the HTML? Do you see if the text actually has un-styled headers, p tags, etc? If the tags are there, it could just mean you haven't been able to style it yet. It's probably a TailwindCSS issue then. If the tags aren't there, then the issue is probably with the markdown plugin itself.

[@alexlindgren1]

​@@pixegamiWhen I added a style for h1 in my tailwind.css the formatting works, but none of the other styles, like the code formatting, that the package should handle shows up, only the styles that i manually add to my tailwind.css

[@pixegami]

@@alexlindgren1 Hmm, the other times I've seen this before is that Tailwind is not "seeing" the content you're updating. Tailwind will look at a bunch of files to figure out when to update its styles, and what to include in the project. This might not be your actual problem, but it's worth checking. Does your Tailwind Config file's "content" array contain all the possible paths for your project code and content? (see tailwindcss.com/docs/configuration) Sorry I replied to this late, I was just going through the messages and realized I missed it. You've probably moved on, but I just wanted to leave a response for anyone who might be having the same problem.

[@bakaleisanich]

thank you )

[@pixegami]

You're welcome!

[@Nanashi-rq7lk]

Nice tutorial

[@pixegami]

Thank you! Cheers!

[@elmcapp6032]

Just asking, instead of moving the functions to component directory, we should put it in a utils directory

[@ibraheemassiri]

Thanks.

[@pixegami]

No worries!

[@hakancav3661]

if you want to leave the management of your blog, you need an admin space with a connection and a form to write a post. What do you recommend as a rich text editor? and is it better to create a database or add files with filesytem?

[@pixegami]

Yeah in that case I think there's usually headless CMS (content management systems) that you can provide to your staff with separate logins and a graphical UI. There's lots of options for this (I haven't tried them myself yet), but check out "JAM Stack": jamstack.org/headless-cms/

[@miniapp7546]

Hi, thanks to you, I created my own blog! I'd like to ask one question. when I add highlight "```tsx" code block to my readme docs, but it does not have color in the homepage.... do you know how to add color?

[@pixegami]

That's awesome! So the syntax highlighting blocks in Markdown are determined by *language* syntax, but .tsx is a *file extension.* The actual language is "typescript", so you need to mark it ```typescript. Read more here: docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

[@AleksandrNeo]

Can I use this project as a connection template for headless CMS, like Hygraph (GraphCMS) ?

[@pixegami]

Yeah, you just have to change the contents of the function that gets the Markdown file contents to talk to an API endpoint instead. But there's probably more suitable templates for that type of project too.

[@devyb-cc]

I heard that the latest version support MDX out of the box now. Have you checked it out yet?

[@pixegami]

No I haven't - thanks for mentioning it though!

[@fathan1247]

Hi! I am new learning next js, should we build the project then push it to github, or we just push the whole project? and how about if I want to make a new article/post?

[@pixegami]

The "build" directory is usually ignored by git, so you don't need to build it to push to GitHub. When you deploy the app, you'll need to build it. Some clouds (like Vercel) build it for you on each push. If you want to make a new article, you will have to commit and push a new .md file in your project.

[@wisnuwicaksono6304]

Hey man, your terminal looks really cool, do you have tuttorial for that?

[@pixegami]

I actually followed this guy's video for my Windows terminal: kzbin.info/www/bejne/d3yVe3hojth-qtE But I changed the colors and font to suit my style more :)

[@chethannavilaepremkumar9520]

Hello thank you for the great video. My question is how do you add a search functionality like Mkdocs / Docusaurus for this blog ?

[@pixegami]

Sorry I haven't had time to look into this. Let me know if you find out!

[@benxneo]

Did you find a way?

[@serdar1629]

nice video man! but one question: how can you write that fast code? Are there any extensions you use?

[@TravisHi_YT]

It's probably a combo of intellisense and github copilot

[@EnderDesing]

Awesome!!!, can you list all extensions and theme do you use? Thanks!

[@pixegami]

Thanks! For frontend projects, I use the Tailwind IntelliSense extension: marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss And I also use Prettier as my automatic formatter: marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode I also use GitHub CoPilot for suggestions.marketplace.visualstudio.com/items?itemName=GitHub.copilot The theme I use right now is "Monokai Pro".

[@KdotVdotBot]

i can get the meta data and post previews, but loads nothing but 404?

[@patite3103]

I cannot name two folders "posts". Elint doesn't allow me. By giving a different name I'm completely lost. Would it be possible to actualize this video with Nextjs 13.2 and with different folder names? thank you

[@nativecoder292]

why the code are not highlighted

[@Ubermennnshh]

Hey buddy, assets' link is not working.

[@pixegami]

Oops, thanks for calling that out. It should be fixed now: files.pixegami.io/nextjs-blog-assets.zip

[@xxapoloxx]

I want to do everything client side, i dont want to use react. Do i have way for NextJs to send a RAW HTML string/file to get started? i can handle everything client side afterwards.

[@pixegami]

Well React and NextJS are also capable to be used as pure client side libraries as well. NextJS is built on top of Reach, so if you don't want to use React, I think you probably don't want to use NextJS either.

[@albinmiftari1832]

I had a lot of errors simply because my .md files had html with class= instead of className=. annoying I have to change it :(

[@tanmaypatra4896]

Hello Author. Are those default server component pages SEO friendly by default, or we need to do some extra treatments to make those SSR pages SEO friendly?? Please reply.

[@pixegami]

Yes, the pages are SEO friendly because they are statically rendered, and bots that crawl the page can immediately read the HTML content :)

[@ullaskunder]

I wonder if it’s possible to add search feature

[@gempitarizkiramadhan4671]

cool !! thks btw, can we control posts using dashboard admin maybe ?

[@pixegami]

Yes, but you’ll need to use some kind of CMS (content management system) to do that-I’ve heard “Sanity.io” is a good one but I’ve not used it myself yet.

[@gempitarizkiramadhan4671]

@@pixegami thks , maybe i will try it ❤️‍🔥

[@Troglodyte2021]

can I replace the markdown files with a database record?

[@pixegami]

It should be possible, but you'll have to replace the part of the code that reads the markdown files and turns it into pages. Alternatively, you can write a separate piece of code to turn your database records into MD files.

[@Troglodyte2021]

@@pixegami thanks for the reply. Just think it should be easier to scale up if its a database record. Imagine you have over 1,0000,000 blogs.

[@pixegami]

@@Troglodyte2021 Oh I see. At that scale I'd probably avoid any local storage of the records, and just make it an API instead (NextJS also has functions to fetch data remotely). And yup, would probably store the contents in a database.

[@nubian_goat]

Bro what powershell app u using it looks so cool.

[@josephchu2324]

What is your theme for your ZSH?

[@pixegami]

I have a video and a GitHub repo covering the Ubuntu ZSH theme I use: github.com/pixegami/terminal-profile. I've recently switched to Mac, and here's my terminal setup for MacOS: github.com/pixegami/mac-terminal

[@sarkkk2134]

hi i am getting an error Missing "key" prop for element in iterator on this {slug}

[@pixegami]

Is this element being created by a loop? If so, you just need to add a "key" prop to it. See similar threads on this for more information: stackoverflow.com/questions/54401481/eslint-missing-key-prop-for-element-in-iterator-react-jsx-key

[@thrivingcreator]

Another question: I noticed you used `.md` files instead of `.mdx` files. Do you have recommendations for setting things up to use `.mdx` instead?

[@pixegami]

I'm not familiar with the .mdx format, but NextJS is really modular so I'm 100% sure it's possible. First you need to change any .md specific logic such as this line: `file.endsWith(".md")` github.com/pixegami/nextjs-blog-tutorial/blob/main/components/getPostMetadata.ts#L8-L18 Then, if required, replace any third party libraries we are using for .md right now ( `gray-matter` and `markdown-to-jsx`) to ones that are compatible with .mdx: github.com/pixegami/nextjs-blog-tutorial/blob/main/package.json#L15-L16

[@thrivingcreator]

Thank you 😃

[@FuDiep]

@@thrivingcreator Did you do it? I am still trying to figure how to make it work

[@thrivingcreator]

@@FuDiep I researched how others incorporate `mdx` into their Next.js apps and found that most people use a similar "scrape-and-parse" approach that @pixegami shows. They also extract front matter and such. And then there's the dynamic routes part that you have to take care of. All that seemed like of lot of work just to get the MDX onto the page. Furthermore, I found that there does not seem to be a "standard" library or approach for doing those things... There's a bunch of different MDX parsers and plugins and it's hard to tell which one is the best tool for the job for my situation. Some of them excel at parsing the MDX if it is coming from a CMS (remotely), while others may excel at parsing the MDX if it is from local files, etc. But even there is was hard to know what plugins and libraries I should be using. Then I found a library called ContentLayer. It seems to offer several advantages. Hot-reloading when MDX content changes, automatically parsing the MDX, etc. It is technically in Beta right now but seems to have decent backing in the community. For example, Lee Robinson (developer advocate at Next.js), was using this library for a while for his blog site (he later switched to using a CMS I believe). Lee also did a video interview with the creator of ContentLayer. At the moment I put MDX on hold, but if I was going to use it and try the “dynamic routing” approach, I would probably start with ContentLayer. Hope that helps!

[@samuelbird4587]

Oh and fyi, gray-matter definitely works with mdx, it’s what I’ve been using!

[@riis08]

great, thanks for the video, I am trying to get the readme from github, but links, and code color is not working any idea?

[@pixegami]

I'm not sure what you mean - links and code color from the app? Do you have to run "npm install" first?

[@blpraveen1436]

Nice video

[@pixegami]

Thanks!

[@pauliusm2735]

for me there is an issue using fs in a page tsx file, i see you have no problems with that, could you explain what is the problem or what have you done to avoid that?

[@pixegami]

What is the error you are seeing with that? I don't remember having to do anything special to make it work, but here's a thread I found that could be helpful: stackoverflow.com/questions/43048113/use-fs-in-typescript

[@mifeng-dd]

Would you be able to build locally? can it only deploy on vercel?

[@pixegami]

Yeah you can build it locally (I think the command is `yarn build`?) and you can deploy it anywhere you want (AWS S3, Cloudflare, etc) - doesn't have to be Vercel.

[@mifeng-dd]

​@@pixegami ​ hi thanks for the reply, `yarn build` will call `next build` and it can't export a static site, the command should be `next build && next export` but it will throw Errors

[@pixegami]

@@mifeng-dd What error are you getting? "yarn build" does execute "next build", but that is exactly the right command to build it as a static site: nextjs.org/docs/deployment#nextjs-build-api I just tested it on the project and it worked for me. Did you make sure to run "yarn install" first?

[@mifeng-dd]

@@pixegami thanks, i mean next build can't export a static HTML site for me, so I can't upload it my my own html server. should i copy the site from .next folder after build?

[@Bizarro69]

how on Earth did you get your powershell to look like that?

[@pixegami]

Ah I thinK I used Windows Terminal: apps.microsoft.com/detail/windows-terminal/9N0DX20HK701?hl=en-US&gl=US It has quite good customisation options (like retro mode). I have some videos on my color themes and other plugins here (but it's for Mac so you'll have to adapt it to Windows): kzbin.info/www/bejne/q5jannuVrd-eeaM

[@KdramaLover205]

how to change meta title and meta description ?

[@pixegami]

You should be able to do it in the MD files' "frontmatter".

[@dboogs8947]

Where is the download file bro?

[@devyb-cc]

Just curious tho, what icon extension do you use???

[@pixegami]

Haha I don't actually know. Do you mean in VSCode or in the terminal? I just moved to a new computer too so I'll be setting up my VSCode from scratch again - I'll make sure to document it.

[@devyb-cc]

@@pixegami On your vscode. I'm currently using github theme and material icon theme. I think those combo look pretty with Droid Sans Mono for terminal, editor, debugger and SF Pro Display for the UI at general (im on linux)

[@devyb-cc]

@@pixegami sounds fun, unlike setting up neovim 😅😂

[@Giorgi.Japiashvili]

How to add header in NextJS 14?

[@pixegami]

Hmm, are you referring to the head section of an HTML page, or headers of a HTTP request? Function headers: nextjs.org/docs/app/api-reference/functions/headers HTML Head section: nextjs.org/docs/pages/api-reference/components/head

[@dozzeph]

Excellent tutorial, I followed it step by step, only when I put local images in this way  they don't appear, it only appears if I put it by url

[@pixegami]

I think that's because when the site is deployed, it considers the "public" folder as the root (whereas the MD file in your editor will have a different root). So from the perspective of the built site, I think the image URL needs to be "/images/getting-started-with-nextjs.png".

[@fastlearner9993]

@@pixegami thats correct , ![alt text] (/images/blah-blah.png) worked for me in the enf . i did try the  route but it didnt work lol .

[@kualta]

thank you!

[@pixegami]

No worries!