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

Set up the development environment with Node.js LTS and pnpm, initialize a Next.js project with TypeScript, and run the dev server to view at localhost 3000.

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.

Learn to lay out the index page in a Next.js app by wiring navigation, building blocks and portfolios sections, and configuring image whitelisting.

Learn to create a reusable footer component by moving it to a common/footer module, exporting from the common index, and updating the page to import and render it.

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.

Build and wire block list and portfolio list components in a Next.js app, with dedicated block item and portfolio item components, using next/image and next/link.

Create a base layout component in Next.js with React, refactor the index page to use the base layout, pass children through props, and clean up page imports and structure.

Prepare real content for your next.js app by placing markdown files with front matter metadata into a content folder, then render them to html via a markdown parser.

Learn to fetch and display blog posts and portfolios in a next.js app by reading markdown files from content blocks, using get file names, get directory, and get static props.

Get blog content by reading markdown files from the blocks folder with a function that reads each file’s content via its full path, using utf-8 encoding and returning a string.

Refactors blog post data access by centralizing the block directory into reusable wrappers, implementing get block file names and get block, while preserving functionality.

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.

Generate a slug from the markdown file name and display blog posts sourced from MD content in a Next.js React app, using typed block props.

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.

Create a new page layout in layouts/page that extends the base layout, removes the header and image, and renders only the content with a functional component accepting children.

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.

Learn to implement a dynamic block detail page in Next.js by creating get static paths and get static props to fetch block data by slug, generate paths, and render content.

Learn to type static props and paths in Next.js by defining getStaticProps and getStaticPaths with explicit context and params, importing next types, and safely handling possibly undefined route parameters.

Learn to display dynamic block data on a Next.js with React detail page, replacing hardcoded values with block title, description, date, and images using next/image.

Install remark, remark-html, and remark-gfm, then build a markdown-to-html transformer with remark and plugins. Expose a function to convert markdown to html and render it with dangerouslySetInnerHTML.

Enhance markdown rendering with tailwind typography via the prose class, install and configure the typography plugin, and style markdown images to 50% width for a clean blog layout.

Improve the blog header using the typography plugin from Taliban CSS and create a separate block header component, then prepare a future search feature for any content on the page.

Develop a content search feature in the Next.js with React app by implementing an input component and a live results list to search portfolios and blocks across the site.

Build a document search feature by creating a hardcoded json index of documents, wiring it to a search library, and querying by title, description, and category to return results.

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.

Create a singleton content index for browser-side search in a Next.js app, wiring a shared search engine and building the index only once across multiple components.

Implement a dynamic search in a Next.js React app by wiring an onChange handler to the input, retrieving the typed value, and querying a content index to show live results.

Define a search content type that extends the marketable item with title, description, and category, and use it in the content search component to type and display results.

Display search results as a list by mapping over the results state only when results exist, showing each result's description and category to enhance user experience.

Learn to improve user experience by clearing results and input when clicking outside, using useEffect to register and cleanup a click-outside listener in a React Next.js app.

Learn to handle click outside only when results exist by using a useeffect callback, preventing outside clicks when there are no results or when typing in the input.

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.

clear search results when clicking outside and reset the controlled input by managing the query state with setQuery, handling outside clicks, and wiring input value.

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.

Build the search data for your Next.js with React app by converting blog blocks into search items with title, description, and category, and write to content/search/index.json.

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.

Implement a get portfolios function, fetch portfolio data from the md data source, wire imports, export portfolios, and display them on pages.

Pass portfolios as props to the portfolio list and portfolio item components. Define a portfolio type for type-safe props and render portfolios from a markdown source on the home page.

Create a portfolio detail page in Next.js by slug, wiring get static paths and get static props to fetch portfolio data by slug and render markdown content.

Learn to keep the footer at the bottom of the portfolio detail page by making the page layout 100vh and using calc to subtract the footer height via css.

Finish the portfolio detail page in a Next.js with React app by finalizing the layout, importing next/image, rendering portfolio content with markdown formatted via dangerouslySetInnerHTML, and preparing for search improvements.

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.

Improve search navigation in a Next.js app by wiring on-click links to router.push for accessing portfolios and content pages, and create a local search index utility loaded at build time.

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.

Display a subset of blocks and portfolios on the home page by slicing data and using a short function to trim titles and descriptions.

Sorts the home page content by date to show newest items first, using a compare callback with two items and a sort function for NFT marketplace and blog posts.

Create a new GitHub repository, initialize git in your project, add and commit files, set the remote origin, and push to the main branch for deployment.

deploy your next.js app by linking your github repository, importing the project, and initiating a deployment that builds dependencies and generates pages and a search index, exposing a live domain.

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.