NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,

Подписаться 4,4 тыс.

Просмотров 21 тыс.

50% 1

Lets build a static blog site. We are going to utilize NextJS 14, shadcn/ui and Tailwind, Velite to read our content, MDX for writing our content allowing for custom components and TypeScript.
Follow along with the RU-vid chapters as they will align to the GitHub commits.
This is my first long-form tutorial so any feedback is appreciated.
GitHub Repo: github.com/jolbol1/nextjs-vel...
Part 2 Add topic tags: • NextJS 14 Markdown Blo...
Links:
Create Next App Commands: nextjs.org/docs/pages/api-ref...
Shadcn Docs: ui.shadcn.com/
Velite Docs: velite.js.org/
Code Themes: shiki.style/themes#themes
OG Image Playground: og-playground.vercel.app/
Favicon Generator: realfavicongenerator.net
-----
🐦 Twitter (X): / jollyshopland
🤓 Personal Site: jamesshopland.com
💻 GitHub: github.com/jolbol1
Chapters:
0:00 Intro
2:12 Create Next App
4:23 Installing shadcn/ui (Stage 1)
13:35 Install and configure velite (Stage 2)
25:31 Site Header (Stage 3)
46:25 Mobile Menu (Stage 4)
1:00:36 Theme toggle (Stage 5)
1:09:09 Setup Blog Page (Stage 6)
1:25:29 Setup Post Page (Stage 7)
1:38:41 Custom MDX Components (Stage 8)
1:44:30 Syntax Highlight code blocks & MDX plugins (Stage 9)
1:52:57 Pagination (Stage 10)
2:06:55 Home Page (Stage 11)
2:16:25 About Page (Stage 12)
2:23:35 Dynamic Graph Image (Stage 13)
2:33:25 SEO and Favicon (Stage 14)
2:45:12 Site Footer (Stage 15)
2:49:55 Navbar z-index fix (Stage 16)
2:50:26 Deploying to Vercel

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@revi_one 3 месяца назад

I really like what you have done and also how you have it on your own site! The video was very dedicated to be understandable with the styles and everything! very good ! congratulations!

@AdityaThakurXD 3 месяца назад

Thank you! I was looking for an updated course to build a blog. This was very helpful 🙌

@dellanmuchengapadare3792 3 месяца назад

Hi man. thanks a lot for this one. I just used your repo to power my personal blog.

@gfsaliev Месяц назад

You're doing a great job! This is a great video, thanks for creating it.

@bytadit 2 месяца назад

thanks for this incredible tutorial, please continue this tutorial series for creating dynamic table of content

@BearDigitalStudios 3 месяца назад

Just a big thanks - I built a blog app using NextJS 12 years ago and wanted a quick tutorial to update and learn - you delivered 100%! You have a new Subscriber.

@dellanmuchengapadare3792 3 месяца назад

isn't Next.js like 6 years old? or do you mean Next.js 12 😅

@BearDigitalStudios 3 месяца назад

@@dellanmuchengapadare3792 NextJS 12 Yes sorry 😅

@patrickmotaung5866 28 дней назад

I'm so grateful I found this video

@cmdrmaltix 25 дней назад

same

@theintjengineer 3 месяца назад

Amazing content. Thank you. I'll finally have a place where I can write my stuff and have them publicly available, instead of just keeping them as notes on Notion haha Thank you, Jolly

@IMBODavid 3 месяца назад

Excellent work !! Thank you very much !

@michaeltyiska 3 месяца назад

This is pure Gold!!

@staystealth Месяц назад

fantastic video! was looking for an example of rendering markdown with nextjs. glad i stumbled across this

@JollyCoding Месяц назад

Awesome to hear, thank you!

@user-ig2mz1fs3b 3 месяца назад

that's exactly what i need now, thanks

@democaff720 12 дней назад

Oh, my God! Sir, you have no overall development thinking at all, and I was stunned after a part of the tutorial

@JollyCoding 12 дней назад

Care to elaborate? Which part? What specifically did you not like? This was my first ever long from tutorial so I’m learning the best delivery methods, as well as how to keep content concise and deliver on a promise without every video teaching basics from the start over and over.

@democaff720 12 дней назад

@@JollyCoding You can traverse the navbar section with a map, write an array of navbar tags so that you can change the navbar content directly to replace the common content later, and then your page layout is too repetitive and not componentized.

@democaff720 12 дней назад

@@JollyCoding I will reconstruct the project. It will take a little time. I will send you a private message on twitter.

@JollyCoding 12 дней назад

@democaff720 I honestly agree with your points. I try to strike a balance here. The reason I didn’t make the page layout into a reusable component was my intent for this was a basic starter template, and others could go in and addd their own styling and more later. If I made it a reusable component it would have been harder for the beginners to make each page more unique. I wanted styling to be as minimal as possible as the main learning goal was the MDX, Velite integration and NextJS. Essentially in the tutorial I was trying to avoid hasty abstractions, and let the learners adapt the starting project to meet their needs. All this said, I’ll take this onboard as a point about communicating this intent to the user, and maybe add points a long the way about how they could abstract it.

@ashutosh_tiwari 14 дней назад

Really helpful!!

@physiqueonepcsm3727 3 месяца назад

Thanks jolly

@8bitWatermelon 3 месяца назад

Thanks for the video. Having migrated from content-layer, I have been looking for an alternative to getting types with my markdown. ✨✨

@saveriomazza7781 2 месяца назад

Very good!

@Stella74m31r3 2 месяца назад

53:12 "And then I'm gonna want some children as well" 😂

@digitalsahara6670 Месяц назад

Hi there, fantastic video, really love the way you explain things are you able to do a breakdown on how you created the JollyUI? would love to learn more about the architecture and creating reusable components for design systems

@KamalSingh-zo1ol 2 месяца назад

Great work, can we add table of contents to it on side? Which is dynamically generated?

@phuvuong5260 2 месяца назад

Your video really help me . and i have question how revert s.body to markdown? ( i want using for search text). hope you make new video about it . Thank you

@alfarizidwiprasetyo9280 Месяц назад

thanks for creating this great video, but may i ask in ImageResponse i cant use reactElement it says cannot find name div or any other html tag, is it deprecated ?

@alfarizidwiprasetyo9280 Месяц назад

My bad bruv i name it ts instead of tsx 😅

@y.m.o6171 Месяц назад

Great work. Can you please add the appropriate license file to the git repo in case you want this code to be shareable with others like me.

@muhammadalifdanielbinmohdh3188 2 месяца назад

Hey a question if have a src folder how to make the content detect at src/content folder?

@BruceWayne-lm6xt Месяц назад

Honestly I found It difficult to Undestand the tutorial I will continue after learning further Thanks

@JollyCoding Месяц назад

Anything you think I could improve, or was it more you just weren't at the level I was teaching yet? Im always looking to improve!

@BruceWayne-lm6xt Месяц назад

@@JollyCoding Your content is Superb ,Actually I just jumped on NEXT js after doing some projects on MERN.

@theoFL 2 месяца назад

1:13:06 the 1st line (import { posts} from "#site/content";) doesnt work for me. I tried different things but it seems like it just cant import it ? Could you explain what this line does ? Does it need dependencies ? Tysm, other than that its an awesome tutorial!

@theoFL 2 месяца назад

I found the solution by messing with the code. I had to import from "@/.velite"; It works but I have no idea why the "#site/content" didnt work.

@livioalvarenga9481 3 месяца назад

Thank you so much for the insightful tutorial; it's been incredibly helpful for my learning journey. However, I've run into a bit of a roadblock and would greatly appreciate any assistance from this knowledgeable community. I'm working on a Next.js project that includes a blog feature, for which I've employed the velite library. Locally, everything functions seamlessly, but I've hit a snag when deploying to Vercel: I'm encountering a RangeError: Maximum call stack size exceeded. Interestingly, this issue only arises when the velite library is part of the project-even after removing all the blog-related files and leaving only the library, the problem remains. I've attempted several fixes, such as rolling back to earlier versions of velite and double-checking my Next.js setup, all while keeping my next.config.js in its default state. Yet, the issue persists. If anyone here has navigated through similar challenges or could offer any guidance, I would be immensely thankful. Your expertise and insights would mean a lot to me. Thank you in advance for any help you can provide!

@livioalvarenga9481 3 месяца назад

I wanted to share that the issue with the RangeError: Maximum call stack size exceeded during the Vercel deployment was resolved by downgrading a package from version 0.33.2 to 0.33.1. This might be helpful for others facing the same issue.

@JollyCoding 3 месяца назад

Thanks for this response, hope this helps others out!

@livioalvarenga9481 3 месяца назад

@@JollyCoding Thank you for sharing your knowledge.

@dasezo_dev 3 месяца назад

I am facing the same problem

@revi_one 3 месяца назад

As always we want more, I would like to have tags, I would like to be able to see the posts by tags, that's something I also want for my blog! can you make the continuation for the tags?

@JollyCoding 3 месяца назад

Will add it to the list as it shouldn’t be too hard to implement!

@JollyCoding 3 месяца назад

Added tags! NextJS 14 Markdown Blog (Part 2): Adding Topic Tags ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aujEjdMO3ME.html

@hasanulhaquebanna 2 месяца назад

my question is how can I make something like create a blogpost on backend then fetch to frontend and convert to mdx blog?

@arxci9402 2 месяца назад

I would do it the other way around so that you're generating all of the mdx files (styles, etc) on the server and then sending it to the client, which is what velite is doing. The defineConfig has a complete callback which you could use to then load the generated posts into your DB

@souravukil4120 7 дней назад

how to make the toc?? i have tried but cant do it

@jokele7237 3 месяца назад

Why did you use Shadcn instead of JollyUI?

@JollyCoding 3 месяца назад

Honestly, familiarity with the project of shadcn. Will begin to implement mine in other tutorials, but I thought people might want to learn the big one first!

@agodbridger4731 3 месяца назад

the problem with app dir is that it isnt ready for prod. and the migration is pain in the ass! (pov 832 pages)

@skzahirulislam2820 Месяц назад

Why?

@rakshitmeshram3515 2 месяца назад

need help with this - my build is failing due to this error Failed to compile. ./app/api/route.tsx:8:2 Module not found: Can't resolve '../../../assets/fonts/Inter-Bold.ttf' 6 | 7 | const interBold = fetch( > 8 | new URL("../../../assets/fonts/Inter-Bold.ttf", import.meta.url) | ^ 9 | ).then((res) => res.arrayBuffer()); 10 | 11 | export async function GET(req: NextRequest) {

@JollyCoding 2 месяца назад

Is the path definitely correct to that font file?