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

Set up a Next.js app with Tailwind CSS, configure global styles, and apply Tailwind utility classes on the index page to style hello world and typography.

Create and export a header and navbar as reusable components in a Next.js app, organizing them under components/common and wiring them into pages/index.tsx with shared navigation data.

Define a shared markdown item interface and separate blog post and portfolio blocks, detailing title, description, slack, images (cover and outdoor), color, and date.

Parse md demonstrates parsing markdown strings into a block object with front matter and content using gray matter, extracting title, description, image, color, and date.

Refactor the blog data flow in a Next.js with React app to fetch all blog blocks by calling get blocks, mapping file names, and returning an array of blocks.

Move blog related functionality into a dedicated library by creating a blocks library, exporting functions, and updating imports to enable a reusable get all items workflow with a generic getter.

Create a dynamic blog detail page in Next.js with React, using a slug-based route, linking from the blog list, and set up a simple layout before fetching data.

Learn to set up alias paths in a Next.js with React project by configuring base URL and a paths map to simplify imports across components, interfaces, and content.

Install and configure the js-search library in a Next.js React app, build an index from a JSON content file, and search across document title and description to display results.

Learn to manage outside and inside clicks for a search input by using useRef to reference the input, compare event.target, and prevent outside clicks when results length > 0.

Register a keyboard event listener for the escape key, check event.key, and clear search results when the escape key is pressed or when clicking outside.

Refactor the Next.js with React app by extracting save search data into a lib function, updating imports, and wiring the blocks to persist search data into a JSON file.

Introduce a portfolio interface by extending markdown item, including cover image, employee image, employment time, date, and highlights, and set up the portfolios directory in lib.

Extend the search by aggregating blocks and portfolios into a markdown content object and generate searchable items with titles, descriptions, and a blocks or portfolios category.

Create blocks and portfolios pages, fix plural links, and implement getStaticProps to fetch all blocks and blogs, rendering a block list with a consistent page layout and bottom padding.

Adapt the blog posts page to create the all portfolios page, retrieving portfolios with get static props and displaying a portfolio list with relevant links.

Add a blog post and portfolio to your Next.js with React app, update content blocks, prepare markdown files, adjust images, and verify deployment to finish the course.