Next JS with React - Build Personal App (Blogs & Portfolios)
Build a personal app with Next/React JS and Typescript. Blogs, portfolios, and search features. No 3rd party dependency
What is Next.js?
Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR), are supported on a per-page basis
What is Typescript?
Is this course right for you?
This course covers creating a personal application (blogs, portfolios) without needing third-party dependencies - databases or cms. Create a personal app with search functionality deployed to Vercel.
The course doesn't explain Next Js/React Js specific functions.
This course will give you the confidence and skills required to start your project.
What are you going to work on?
The focus of this course is coding and not writing HTML content. The course starts with the preparation of the base layout of the application. All design - images, and content are provided by the instructor.
After the layout is prepared, the students will work on the functionality to access and fetch the local data stored in markdown files.
Students will learn to work with a file system - fs package in this part. The content of the files is retrieved as a string of data.
To get the formatted data, students will learn how to parse "frontmatter" metadata and the markdown content from the file.
The fetched content is then provided to the pages and displayed in the application.
After the content part is finished, students will start working on the search functionality. All content presented on the website can be searched via the input component provided in the navigation bar.
The course covers using all the content to build a local search index stored as a JSON file. This JSON file is then fed as a data source to the search component.
Students will work on the portfolios feature when the search functionality is finished. The portfolios feature will be very similar to the blogs. Portfolios are also kept as markdown data, which means lots of implementation is shared with the blogs.
The last part of the course covers deployment to the Vercel platform.
Basic Next JS knowledge is required!
Important! Next 13 Changes
Header and Navbar
Portfolios and Blogs Components
Get File Names
Get Blog Content
Get All Blogs
Blog Detail Page
Get Blog By Slug
Static Props and Paths Types
Display Props Data
Markdown To Html
Create search docs
Search Content Type
Handle click if results
Check if clicking on input
Handle Escape Key
Build Search Index
Save search data
Pass Portfolios as Props
Get Portfolio By Slug
Page layout Css
Detail Page Finish
Generic Content Data
Navigate to searched content
All Blogs Page
All Portfolios Page
Data subset and shortify
Next 13 Updates
Adds Content & Course Finish
Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.
Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
Of course not! Every lecture is committed (explained in the introduction section). You can start watching any lecture. Just download the correct project version attached to the lecture resources.
Single Course Access
Access to this course only.Get started now
$19.00 / month
Cancel Anytime!Get started now
$190.00 / year
Cancel Anytime!Get started now