Een blog bouwen met Next.js en MDX Building a Blog With Next.js and MDX

Next.js is uitgegroeid tot een van de populairste React-frameworks van dit moment. Het is eenvoudig op te zetten, en door de functies en optimalisaties die het standaard meebrengt, vraag je je af waarom je React-apps ooit op een andere manier hebt gebouwd. We leren Next.js en MDX kennen door een blog te bouwen. We leren hoe je Next.js-apps opzet, dynamische URL's genereert en werkt met data, afbeeldingen, Markdown en Bootstrap. Om deze tutorial te volgen heb je basiskennis van React en Markdown nodig. GitHub-repo: https://github.com/ebenezerdon/nextjs-mdx-blog MDX-bestanden: https://github.com/ebenezerdon/mdx-files-nextjs-blog Afbeeldingen: https://github.com/ebenezerdon/images-next-mdx-tutorial 00:00 Intro 04:17 De app opzetten 11:15 Bootstrap instellen 15:11 Het Nav-component maken 19:32 De bio-pagina maken 21:46 MDX-bestanden voor de posts toevoegen 24:44 De homepage van de blog bouwen 37:19 De pagina voor een post bouwen 54:10 Conclusie ––– Probeer WebStorm en krijg een gratis proefperiode van 30 dagen: https://www.jetbrains.com/webstorm/ Lees de nieuwste updates en relevante artikelen op de WebStorm Blog: https://blog.jetbrains.com/webstorm/ WebStorm op Twitter: https://twitter.com/WebStormIDE #Nextjs #MDX #WebStorm

Next.js has become one of the most popular React frameworks of today. Coupled with its ease of setup, the out-of-the-box features and optimizations it brings to the table will leave you wondering why you’ve been building React apps any other way. We’re going to learn about Next.js and MDX by building a blog. We’ll learn how to set up Next.js apps, generate dynamic URLs, and work with data, images, Markdown, and Bootstrap. To follow along with this tutorial, you’ll need a basic understanding of React and Markdown. GitHub repo: https://github.com/ebenezerdon/nextjs-mdx-blog MDX files: https://github.com/ebenezerdon/mdx-files-nextjs-blog Images: https://github.com/ebenezerdon/images-next-mdx-tutorial 00:00 Intro 04:17 Setting up the app 11:15 Bootstrap set up 15:11 Creating the Nav component 19:32 Creating the bio page 21:46 Adding MDX files for the posts 24:44 Building the blog's homepage 37:19 Building the post's page 54:10 Conclusion ––– Check out WebStorm and get a 30-day free trial: https://www.jetbrains.com/webstorm/ Read the latest updates and relevant articles on the WebStorm Blog: https://blog.jetbrains.com/webstorm/ WebStorm on Twitter: https://twitter.com/WebStormIDE #Nextjs #MDX #WebStorm