nextjs
dz / webdev / nextjsSummary
Things related to the next.js framework
Subgraphs
Node Tree
- redirect
- partial_rendering
- root_layout
- learn_dashboard_app
- routing
- RSC_payload
- create_next_app
- network_boundary
- revalidate_path
- route_handler
- fast_refresh
- typescript_plugin
- vercel_postgres
- dashboard_app_pass_id_server_action
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), partial_rendering_ex (mentioned in dashboard app tutorial), webdev/formdata (FormData mentioned in chapter 12 (mutating data), for,using forms with server actions), webdev/clsx (clsx library used in nextjs dashboard tutorial), react_foundations (suggested prereq course before dashboard app) |
| 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 | routing_terminology, dynamic_routes |
| hyperlink | https://nextjs.org/docs/app/building-your-application/routing |
| routing_terminology | |
| content | Routing Terminology |
| children | URL_path , root, URL_segment, tree, leaf, subtree |
| 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 | routing_terminology, dynamic_routes |
| 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 |