58
Lectures
6
Hours

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?

TypeScript is an open-source language that builds on JavaScript, one of the world's most used tools, by adding static type definitions.

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?

You will build a personal application from scratch. You will learn how to write code in Typescript language - a superset of Javascript providing additional features and a static type checker.

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.

Requirements

  • Basic Next JS knowledge is required!

Course curriculum

  • 2

    Layout Preparation

    • Init Project

    • Tailwind Css

    • Important! Next 13 Changes

    • Page Layout

    • Header and Navbar

    • Footer Component

    • Portfolios and Blogs Components

    • Base Layout

  • 3

    Markdown Content and Library

    • Content

    • Get File Names

    • Get Blog Content

    • Function Refactor

    • Blog Interface

    • Parse MD

    • Get All Blogs

    • Blog Lib

  • 4

    Blogs Feature

    • Display Blogs

    • Blog Detail Page

    • New Layout

    • Alias Paths

    • Get Blog By Slug

    • Static Props and Paths Types

    • Display Props Data

    • Markdown To Html

    • Tailwind typography

    • Blog Header

  • 5

    Content Search

    • Content Search

    • Create search docs

    • JS Search

    • Content Indexer

    • Perform Search

    • Search Content Type

    • Show Results

  • 6

    UX Search Improvements

    • Handle Click

    • Handle click if results

    • Check if clicking on input

    • Clear Results

    • Handle Escape Key

  • 7

    Store Search Data

    • Build Search Index

    • Save search data

  • 8

    Portfolio Feature

    • Portfolio interface

    • Get portfolios

    • Pass Portfolios as Props

    • Get Portfolio By Slug

    • Page layout Css

    • Detail Page Finish

  • 9

    Generic Search + More Pages

    • Generic Content Data

    • Navigate to searched content

    • All Blogs Page

    • All Portfolios Page

    • Data subset and shortify

    • Sort Content

  • 10

    Deployment

    • Next 13 Updates

    • Github repo

    • Project Deployment

    • Adds Content & Course Finish

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    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.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Next JS with React - Build Personal App (Blogs & Portfolios)"

    $19.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now