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 webdev/zod (zod used for validation in chapter 12), react_foundations (suggested prereq course before dashboard app), partial_rendering_ex (mentioned in dashboard app tutorial), webdev/clsx (clsx library used in nextjs dashboard tutorial), learn_dashboard_app/16_adding_metadata, webdev/formdata (FormData mentioned in chapter 12 (mutating data), for,using forms with server actions)
hyperlink https://nextjs.org/learn/dashboard-app
location knowledge/nextjs.dz:4

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

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
location knowledge/nextjs.dz:15

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.
location knowledge/nextjs.dz:23

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
location knowledge/nextjs.dz:35

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

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.
location knowledge/nextjs.dz:46

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 partial_rendering, learn_dashboard_app
location knowledge/nextjs.dz:56

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
location knowledge/nextjs.dz:66

vercel_postgres
content Vercel Postgres SDK
hyperlink https://vercel.com/docs/storage/vercel-postgres/sdk
location knowledge/nextjs.dz:71

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.
location knowledge/nextjs.dz:75

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
location knowledge/nextjs.dz:84

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.
location knowledge/nextjs.dz:90

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.
location knowledge/nextjs.dz:97

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
location knowledge/nextjs.dz:105

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
location knowledge/nextjs.dz:113

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

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.
location knowledge/nextjs.dz:124

URL_path
content URL path: Part of the URL that comes after the domain (composed of segments)
parents routing_terminology
location knowledge/nextjs.dz:133

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
location knowledge/nextjs.dz:137

subtree
content subtree: Part of a tree, starting at a new root (first) and ending at the leaves (last).
parents routing_terminology
location knowledge/nextjs.dz:143

root
content Root: The first node in a tree or subtree, such as a root layout.
parents routing_terminology
location knowledge/nextjs.dz:147

leaf
content Leaf: Nodes in a subtree that have no children, such as the last segment in a URL path.
parents routing_terminology
location knowledge/nextjs.dz:151

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
location knowledge/nextjs.dz:155

nextauthjs
content NextAuthJS
children middleware (authorized callback uses middleware in nextjs config), nextauthjs/credentials_provider
parents learn_dashboard_app/15_adding_authentication
hyperlink https://authjs.dev/reference/nextjs
location knowledge/nextjs.dz:171

middleware
content Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
children matcher
parents nextauthjs, learn_dashboard_app/15_adding_authentication
hyperlink https://nextjs.org/docs/app/building-your-application/routing/middleware
location knowledge/nextjs.dz:176

matcher
content matcher: runs middleware on specific paths
children javascript/regex (matcher uses full regex for matching paths)
parents middleware
hyperlink https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
location knowledge/nextjs.dz:190