webdev/nextjs

nextjs

dz / webdev / nextjs

Summary

Things related to the next.js framework

Subgraphs

Node Tree

Nodes

learn_dashboard_app
content Tutorial for how to make a full-stack web application with next.js
children react_foundations (suggested prereq course before dashboard app), webdev/zod (zod used for validation in chapter 12), webdev/clsx (clsx library used in nextjs dashboard tutorial), partial_rendering_ex (mentioned in dashboard app tutorial), webdev/formdata (FormData mentioned in chapter 12 (mutating data), for,using forms with server actions)
hyperlink https://nextjs.org/learn/dashboard-app

react_foundations
content React Foundations course
parents learn_dashboard_app
hyperlink https://nextjs.org/learn/react-foundations

network_boundary
content Network Boundary: a conceptual line that separates the server and client environments
hyperlink https://nextjs.org/learn/react-foundations/server-and-client-components#network-boundary
flashcard (front) What is a network boundary?
flashcard (back) A conceptual line that separtes the server and client environments

RSC_payload
content RSC Payload: The React Server Component Payload is a special data format that contains the rendered results of the server components, as well as placeholders where client components should be rendered and their javascript files. It is sent to the client.
flashcard (front) What is an RSC payload?
flashcard (back) The React Server Component (RSC) payload is a data format sent to the client in a NextJS setup. It represents the the rendered results of the server components, and has placeholders for the client components.

fast_refresh
content fast refresh: React feature integrate into Next.js that allows you to live reload the browser page while maintaining temporary client-side state when you save changes to a file.
hyperlink https://nextjs.org/docs/architecture/fast-refresh

typescript_plugin
content typescript plugin for nextjs
hyperlink https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin

partial_rendering
content partial rendering: only the route segments that change on navigation re-render on the client, and any shared segments are preserved.
children partial_rendering_ex (example)
hyperlink https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering
flashcard (front) What is partial rendering?
flashcard (back) In NextJS, partial rendering occurs in the context of navigation. Only segments that change on navigation re-render on the client. Any shared segments are preserved.

partial_rendering_ex
content Ex: when navigating between sibling routes that have a shared layout such as =/dashboard/settings= and =/dashboard/analytics=, only the individual pages will be rendered.
parents learn_dashboard_app, partial_rendering

root_layout
content root layout: required. placed at top-level of your app. must contain =<html>= and =<body>= tags.
hyperlink https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required

vercel_postgres
content Vercel Postgres SDK
hyperlink https://vercel.com/docs/storage/vercel-postgres/sdk

route_handler
content Route Handlers: allow you to create custom request handlers for a given route using the Web Request and Response APIs
children webdev/request_api (route handlers use the request API to make,custom requests for the given route), webdev/response_api (route handlers use the response API to make,custom requests for the given route)
hyperlink https://nextjs.org/docs/app/building-your-application/routing/route-handlers
flashcard (front) What is a route handler?
flashcard (back) Route handlers in NextJS enable the creation of custom request handlers for a given route.

create_next_app
content create-next-app: CLI that allows you to create a new Next.JS application using the default template or an example from a public GH repository.
hyperlink https://nextjs.org/docs/app/api-reference/cli/create-next-app

redirect
content redirect: allows you to redirect the user to another URL.
hyperlink https://nextjs.org/docs/app/api-reference/functions/redirect
flashcard (front) What does redirect() do in NextJS?
flashcard (back) Redirect is a function that allows you to redirect the user to another URL.

revalidate_path
content revalidatePath: allows you to purge cached data on-demand for a specific path
hyperlink https://nextjs.org/docs/app/api-reference/functions/revalidatePath
flashcard (front) What does revalidatePath() do in NextJS?
flashcard (back) revalidatePath() is a function that allows you to you to purge cached data on-demand for a specific path.

dynamic_routes
content Dynamic Routes: when you don't know the exact segment names ahead of time, and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time
children URL_segment (Dynamic Segments of a route are filled in at request time)
parents routing
hyperlink https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

routing
content Routing: Routes are the skeleton of a NextJS application. Routes are related to URL routes, and correspond to a specific fire hierarchy in the project.
children dynamic_routes, routing_terminology
hyperlink https://nextjs.org/docs/app/building-your-application/routing

routing_terminology
content Routing Terminology
children URL_segment, root, leaf, subtree, URL_path , tree
parents routing
hyperlink https://nextjs.org/docs/app/building-your-application/routing#terminology

URL_segment
content URL segment: The part of the URL path, delimited by slashes
parents dynamic_routes, routing_terminology
flashcard (front) What is a URL segment?
flashcard (back) A URL segment is the part of the URL path, delimited by slashes.

URL_path
content URL path: Part of the URL that comes after the domain (composed of segments)
parents routing_terminology

tree
content tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
parents routing_terminology

subtree
content subtree: Part of a tree, starting at a new root (first) and ending at the leaves (last).
parents routing_terminology

root
content Root: The first node in a tree or subtree, such as a root layout.
parents routing_terminology

leaf
content Leaf: Nodes in a subtree that have no children, such as the last segment in a URL path.
parents routing_terminology

dashboard-app-pass-id-server-action
content In this part of the tutorial, a variable id is passed to the server action via bind.
children javascript/bind (bind() is somehow needed here for some reason)
hyperlink https://nextjs.org/learn/dashboard-app/mutating-data#4-pass-the-id-to-the-server-action