Next Js With React – Build Personal App (Blogs Portfolios)

Next.js 是什么？Next.js 是一个基于 React 的框架，为服务器端渲染（SSR）和静态页面应用程序提供基础设施和简单的开发体验。一个直观的基于页面的路由系统（支持动态路由）Pre – 渲染，静态生成 (SSG) 和服务器端渲染 (SSR)，都支持每页基础什么是 Typescript？TypeScript 是一种基于 JavaScript 的开源语言，它是世界上最常用的工具之一，由添加静态类型定义。本课程适合您吗？本课程涵盖创建个人应用程序（博客、作品集）而不需要第三方依赖项 – 数据库或 cms。创建一个将搜索功能部署到 Vercel 的个人应用程序。本课程不解释 Next Js/React Js 的具体功能。本课程将为您提供启动项目所需的信心和技能。您将从事什么工作？您将从头开始构建个人应用程序。您将学习如何用 Typescript 语言编写代码 – Javascript 的超集提供附加功能和静态类型检查器。本课程的重点是编码而不是编写 HTML 内容。课程从准备应用程序的基本布局开始。

所有设计 – 图像和内容均由讲师提供。布局准备好后，学生将学习访问和获取存储在 markdown 文件中的本地数据的功能。学生将学习使用文件系统 – fs 包在这部分。文件的内容作为数据字符串检索。为了获得格式化的数据，学生将学习如何从文件中解析“frontmatter”元数据和降价内容。然后将获取的内容提供给页面并显示在应用程序中。内容部分完成后，学生将开始研究搜索功能。网站上呈现的所有内容都可以通过导航栏中提供的输入组件进行搜索。课程涵盖使用所有内容构建存储为 JSON 文件的本地搜索索引。然后将此 JSON 文件作为数据源提供给搜索组件。当搜索功能完成后，学生将使用投资组合功能。投资组合功能将与博客非常相似。作品集也以降价数据的形式保存，这意味着许多实现与博客共享。课程的最后一部分涵盖了部署到 Vercel 平台。

Build a personal app with Next/React JS and Typescript. Blogs, portfolios, and search features. No 3rd party dependency.

Published 11/2022
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.13 GB | Duration: 6h 9m

What you’ll learn

Get an understanding of how to create personal app in practical way
Create a complete portfolio/blog app
Present yourself with your content platform
Establish yourself in the field of the exciting Next and React web development environment

Requirements

Basic Next JS knowledge is required.

Description

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 basisWhat 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How To Resolve Issues

Section 2: Layout Preparation

Lecture 3 Init Project

Lecture 4 Tailwind Css

Lecture 5 Next 13 Changes –

Lecture 6 Page Layout

Lecture 7 Footer Component

Lecture 8 Header and Navbar

Lecture 9 Portfolios and Blogs Components

Lecture 10 Base Layout

Section 3: Markdown Content and Library

Lecture 11 Content

Lecture 12 Get File Names

Lecture 13 Get Blog Content

Lecture 14 Function Refactor

Lecture 15 Blog Interface

Lecture 16 Parse MD

Lecture 17 Get All Blogs

Lecture 18 Blog Lib

Section 4: Blogs Feature

Lecture 19 Display Blogs

Lecture 20 Blog Detail Page

Lecture 21 New Layout

Lecture 22 Alias Paths

Lecture 23 Get Blog By Slug

Lecture 24 Static Props and Paths Types

Lecture 25 Display Props Data

Lecture 26 Markdown To Html

Lecture 27 Tailwind typography

Lecture 28 Blog Header

Section 5: Content Search

Lecture 29 Content Search

Lecture 30 Create search docs

Lecture 31 JS Search

Lecture 32 Content Indexer

Lecture 33 Perform Search

Lecture 34 Search Content Type

Lecture 35 Show Results

Section 6: UX Search Improvements

Lecture 36 Handle Click

Lecture 37 Handle click if results

Lecture 38 Check if clicking on input

Lecture 39 Clear Results

Lecture 40 Handle Escape Key

Section 7: Store Search Data

Lecture 41 Build Search Index

Lecture 42 Save search data

Section 8: Portfolio Feature

Lecture 43 Portfolio interface

Lecture 44 Get portfolios

Lecture 45 Pass Portfolios as Props

Lecture 46 Get Portfolio By Slug

Lecture 47 Page layout Css

Lecture 48 Detail Page Finish

Section 9: Generic Search + More Pages

Lecture 49 Generic Content Data

Lecture 50 Navigate to searched content

Lecture 51 All Blogs Page

Lecture 52 All Portfolios Page

Lecture 53 Data subset and shortify

Lecture 54 Sort Content

Section 10: Deployment

Lecture 55 Next 13 Update

Lecture 56 Github repo

Lecture 57 Project Deployment

Lecture 58 Adds Content & Course Finish

Anybody interested how to create locally stored content platform with search feature.,People looking for a practical web development guide.,This course is for everyone eager to understand how to build the app from scratch.