How To Build A Blog With Next.js And Tailwind: Part 1

Well, well, well, look what we have here! A 3 part series on how to build a blog with Next.js and TailwindCSS!

This is part 1 which focuses on getting our blog set up with Next.js.

Part 2 will be all about TailwindCSS.

Part 3 is about how to make Next.js render Markdown with Tailwind’s Typography plugin!

• 0:00 Intro
• 2:05 Why Next.js?
• 3:25 Install Next.js
• 5:22 Let’s Code
• 7:26 Always Be Data first
• 9:29 Customize Next.js App
• 11:28 Let’s make a Nav
• 13:35 Make Fixture Data
• 15:03 Make list of blog items
• 17:23 Link to individual blog page
• 18:20 Make Individual Blog page
• 19:15 getStaticProps
• 20:26 getStaticPaths
• 22:37 Debugging getting it working
• 25:41 It’s working!
• 26:13 Wrap-up

#tailwindcss #css #web-development #programming

What is GEEK

Buddha Community

Building a Serverless Multi-user Blogging Platform with Next.js, Tailwind, & AWS

We’ll start from scratch, creating a new Next.js app. We’ll then, step by step, use the Amplify CLI to build out and configure our cloud infrastructure and then use the Amplify JS Libraries to connect the Next.js app to the APIs we create using the CLI.

The app will be a multi-user blogging platform with a markdown editor. When you think of many types of applications like Instagram, Twitter, or Facebook, they consist of a list of items and often the ability to drill down into a single item view. The app we will be building will be very similar to this, displaying a list of posts with data like the title, content, and author of the post.

Workshop material: https://github.com/dabit3/next.js-amplify-workshop

0:00 – Introduction
1:50 – Project setup
11:00 - Testing the API (AWS AppSync)
12:30 - Rendering posts in Next.js
17:50 - Adding authentication (Amazon Cognito)
18:43 - Adding a profile view
26:28 - Enabling API authorization
31:00 - Adding a form for creating posts
44:43 - Querying for signed in user’s post
52:13 - Editing and deleting posts
1:02:00 - Adding a cover image (Amazon S3)
1:16:00 - Conclusion

#next #next.js #tailwind #aws

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Chakra UI + Next JS Quickstart - Build A Personal Website And Blog (1 of 2)

In this video, we code a personal website and blog using the next.js JavaScript framework and the Chakra-UI css framework. We override and create a custom theme, add a dark mode, create and modify _app.js and _document.js, and set up the index.js page for the rest of the videos. Be sure to watch part 2 where we finish off the remainder of this video.

Chakra-UI version: V1
Next.JS version: 10

Next Video: https://youtu.be/G6_qqMrfTQg

Code: https://github.com/bjcarlson42/personal-website-nextjs-chakra

(0:00) Introduction
(0:27) Creating a next.js app
(2:18) Adding Chakra-UI
(4:13) Extending the custom theme - 1
(7:36) Adding Inter google font and _document.js
(9:36) Extending the custom theme - 2
(12:25) Using custom theme in _app.js + customizing color mode by using user’s default preference
(14:46) Creating DarkModeSwitch component
(17:03) Creating the Container component

#chakra

#chakra #next #next js #chakra

Laravel API and React Next JS frontend development - 28

In this video, I wanted to touch upon the functionality of adding Chapters inside a Course. The idea was to not think much and start the development and pick up things as they come.

There are places where I get stuck and trying to find answers to it up doing what every developer does - Google and get help. I hope this will help you understand the flow and also how developers debug while doing development.

App url: https://video-reviews.vercel.app
Github code links below:
Next JS App: https://github.com/amitavroy/video-reviews
Laravel API: https://github.com/amitavdevzone/video-review-api

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #api #react next js #next #frontend #development

Find a Mentor Website with Next Js Tailwind Css - Day 3

Find a Mentor Website with Next Js Tailwind Css - Day 3
Sources :
Trello : https://trello.com/invite/b/kGXI8zlV/d4a415ab005f801d82939d886232334e/100daysofcode
Figma https://figma.com/@kewcoder
Github https://github.com/kewcoder

#css #tailwind css #next js #next #javascript