Complete Next.js with React & Node - Portfolio Apps [2023]

Explore building a resource management app with Next.js and React, featuring creating, displaying, updating, and activating resources, with time tracking and a Node.js API using a JSON data store.

Set up your development environment for a Next.js project by installing Node.js (14.16 LTS), verifying installation, initializing a Next.js app with npx create-next-app, and running the dev server on localhost:3000.

Explore how Next.js uses the _app.js wrapper to render pages like index and about, with a default export and global styling across all pages.

Learn to build a Next.js home page using React by composing component A and component B, exporting default, and wrapping content in a single root element.

Explore class components in React and Next.js, showing how to write a class with render, extends React.Component, and how functional components with hooks now manage state and render JSX content.

Explore JSX in React, learning how JSX abstracts createElement calls to render components, with examples of h1 elements, fragments, and the difference between HTML-like syntax and JavaScript.

Master arrow functions in Next.js with React by re-exporting a home page function, using default and named exports, and embracing concise single-expression syntax.

Explore managing state in React with the useState hook, storing user inputs and component values locally, and see how the value and setter update the user interface in real time.

Learn how state mutations trigger component re-execution and UI updates in React by wiring onClick events to increment and decrement values using a setValue function. Inspect state changes with debugging.

Learn how to change state with plus and minus buttons, use onClick handlers, and why wrapping changes in an arrow function prevents infinite re-renders; explore setValue versus direct state updates.

Learn how to manage state in class components with setState, incrementing and decrementing a value, and how to initialize and destructure state using constructor and super.

Learn how to pass data from a parent component to a child using props, including strings, numbers, booleans, functions, and components; destructure props for direct access.

Learn how to use use effect in React to run side effects when props or state change, using a dependency array (including empty array) to control execution.

Learn how to pass props into a class component and access them with this.props or destructuring, by replacing a functional component with a class component and rendering the prop value.

Explore how to pass components as props in a Next.js and React app, including prop references, aliasing, uppercase versus lowercase props, and rendering dynamic components.

Install Bulma CSS, import bulma.min.css in _app.js, and verify styling changes; then apply Bulma templates, convert HTML to JSX, and tidy the content manager app.

Integrate the Bulma framework into a Next.js app and modularize the UI by creating reusable components for the navbar, resource highlights, newsletter, resource list, and footer, improving organization and maintainability.

Refactor a Next.js project by moving index.js components into separate files, fixing jsx class to className, and configuring a baseUrl in jsconfig.json for absolute imports from the project root.

Create a reusable layout component that renders a navigation bar and passes page content through props.children, wrapping all pages to share a common layout.

Create a data-driven resource system by building an api data module, exporting a resources array, and rendering it in the layout with json stringify for display.

Learn to render a resource list using the map function, key props, and a render function, and refine display with slicing and arrow functions in React JSX.

Learn how to use get static props to fetch resources from an API and pass them as props to a Next.js page, pre-filling the page with data.

Compare getStaticProps and getServerSideProps in Next.js to understand build-time versus runtime data fetching, and pre-rendered versus server-rendered pages, and their SEO implications.

Build a separate API app to serve as a backend for a Next.js project, using a local data.json database. Learn why this separation matters for deployment on Vercel.

Build and run a Node.js Express server on port 3001 that exposes endpoints like / and /api/resources to serve JSON data to a Next.js app, demonstrating server-side API integration.

Set up the server to read data.json with path and fs, parse it, and return resources from the /api/resources endpoint to clients.

Learn to fetch data from a local Next.js server on port 3001 using getserversideprops and the /api/resources endpoint, replacing data.json, with notes on cross-origin requests and server-only data flow.

Learn to fix cross-origin resource sharing by proxying requests through your Next.js server from localhost 3000 to 3001, and explore enabling cors on the api server.

Create a resource create page at /resources/new in a Next.js app, using a functional component with a layout, and demonstrate client-side navigation via next/link.

Generate a new resources page in the Next.js app, build a Bulma-based input form, and learn to submit data to a server to be stored in a JSON file.

Extend the resource form in a Next.js app by adding inputs for title, description, link, priority, and time to finish, removing the image field, and integrating submit and cancel buttons.

Learn to pre-fill a form with default data using useState, creating a form object with title, description, link, priority, and time to finish, and bind inputs to form values.

This lecture demonstrates managing a form in a React setup by keeping form data in state, preventing page reload with a type button, and stringifying the data for an alert.

Learn to create a controlled title input by adding an onchange handler, extracting event.target.value, and mutating the form state with a spread to preserve other fields while updating the title.

Create a single reusable handle change function that updates any input using event.target.name and value. Apply it across all form fields and reset to default data.

Learn to send data to the server by converting form data to JSON with JSON.stringify, setting the Content-Type to application/json, and posting to the API/resources endpoint using fetch.

Learn to submit form data with a post request in a Next.js app, handling get and post methods on /api/resources, logging request bodies, and persisting data to a JSON store.

Learn to send post requests to an API endpoint with axios and access the request body. Install npm to add axios, import it, and use axios.post for simpler, promise-based calls.

Validate data teaches how to extract and verify request body fields in an API, returning 422 errors when data are missing and confirming with a 200 response.

Learn to validate form data, handle post requests with async/await and try/catch, and display server messages safely using optional chaining when building Next.js with React and Node portfolio apps.

Develop a post endpoint on the node server to receive resource data via axios to localhost 3001, enable express.json for request bodies, and log data before saving to json file.

Finish the post endpoint by extracting the request body, augmenting it with created date, status, and an id, and persisting the new resource to a json file via fs writeFile.

Handle post requests from a Next.js app to a Node.js server using Axios with await and try/catch to return data has been saved or data cannot be stored.

Learn how to redirect users after a successful create operation in Next.js by using the useRouter hook and router.push to navigate to the home page.

Define a node.js server endpoint to fetch a resource by id, extract the id from request parameters, search the JSON data, and return the matching resource for a detail page.

Create a dynamic resource detail page in Next.js with a pages/resources/[id].js route, extract the id from the URL, and fetch the resource data from a Node.js API.

Extract the resource id from the URL and fetch data from the Node.js API. Apply get server side props or get static props to render the title and description.

Learn to navigate from the home page to a resource detail page using next/link with dynamic /resources/[id] links from resource.id, and style the action as a bulma button.

Explore how getInitialProps works as a hybrid server‑and‑client data fetcher in Next.js, its deprecation in favor of getServerSideProps and getStaticProps, and how to fetch resource data.

Understand how get static paths enable dynamic Next.js pages by supplying IDs to get static props at build time, and see how to structure paths and fallbacks for resource pages.

Demonstrate how getStaticPaths and getStaticProps generate Next.js pages, and explain fallback false versus true with 404s and loading states in production.

Demonstrate revalidate for get static props, regenerating the html document after a one second interval. Compare fallback false producing a 404 and fallback true fetching new data to update page.

Switch from get static props to get server side props for a resource edit page, and build a dynamic resources/[id]/edit route that pre-fills the form.

Learn to build a reusable resource form component for create and edit pages, separating form state and handlers, and wiring a prop-based submit function to post or patch resources.

Improve the resource edit page by fetching existing resource data, pre-filling the form with initial data, and sending a patch request to update the resource on the server.

learn to implement a patch request to update a resource on the resource edit page, using axios and the api/resources endpoint.

Learn to implement a Node.js patch endpoint to update resources stored in a JSON file, using the resource id to locate the index and overwrite with the request body.

Learn to build an active resource component in Next.js that enables updating resources, displaying a pre-filled update form, and showing the active resource with elapsed time in header across pages.

Activate a resource by patching its status to active via axios on the resource detail page, then ensure only one active resource at a time and display time to finish.

Create a new api/active-resource endpoint to fetch the currently active resource, activate resources with an activation time, and test update and activation flows.

Create a Next.js API endpoint to fetch the active resource, proxying requests to a local API with axios, manage state with useState and useEffect, and display the resource title.

Activate a resource in a Next.js app and compute elapsed seconds using moment to display the time remaining to finish.

Build a seconds countdown in React to display time to finish, using useState and useEffect to update every second with setInterval and clear on unmount.