Next.js with React - Developer's App (Practical Way)

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 offering a streamlined development experience for server-side rendered (SSR) and static page applications. It boasts an intuitive page-based routing system featuring support for dynamic routes. It provides pre-rendering options like static generation (SSG) and server-side rendering (SSR) on a per-page basis.

What is TypeScript?

TypeScript, an open-source language, builds upon JavaScript by introducing static type definitions. It enhances one of the world's most widely used tools, adding additional features and a static type checker

Is This Course Right for You?

Perfect for creating a personal application (blogs, portfolios) without relying on third-party dependencies like databases or CMS. You'll craft an application with search functionality and deploy it on Vercel. The course doesn't delve into Next.js/React.js-specific functions but focuses on building confidence and skills for your projects.

What Will You Work On?

You'll build a personal application from scratch, diving into TypeScript—a superset of JavaScript with extra features and a static type checker

1. Base Layout Preparation: Start with laying the foundation for your application's layout. The instructor provides design elements, images, and content.

2. Functionality Development: Work on accessing and fetching local data stored in markdown files. Learn to navigate the file system using the fs package, retrieve content as strings, parse metadata, and markdown content.

3. Content Display: Display the fetched content on the application's pages, focusing on proper formatting and presentation

4. Search Functionality: Implement a feature enabling users to search through all website content. Construct a local search index stored as a JSON file, serving as a data source for the search component.

5. Portfolios Feature: Extend your skills to implement portfolios, a feature similar to blogs but utilizing shared implementation with markdown data.

6. Deployment to Vercel: Conclude the course by learning how to deploy your application to the Vercel platform.

This course ensures hands-on coding experience, emphasizing practical skills for application development, excluding the complexities of Next.js/React.js-specific functions. Gain the confidence to kickstart your projects with a robust foundation and practical deployment knowledge.