-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocs.txt
212 lines (166 loc) · 7.84 KB
/
docs.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
1. What is Next.js?
=> Next.js is a framework for building web applications.
=> Build user interfaces using React components.
=> Next.js provides additional structure, features, and optimizations for your application.
=> Next.js also abstracts and automatically configures tooling for you, like bundling, compiling, and more.
2. Main features:
> Routing: A file-system based router.
> Rendering: Client-side and Server-side Rendering.
> Data Fetching: Simplified data fetching with async|await support in React Components.
> TypeScript: Improved support for TypeScript.
3. Installation:
* npx create-next-app@latest
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
4. Structure:
> app:
layout.tsx //The root layout
page.tsx //The root of the application
globals.css
page.module.css
favicon //Directly added
> public: //Store static assets such as images, fonts,...
5. app Routing Conventions:
//Routing__files:
layout .js .jsx .tsx ==> Layout
page .js .jsx .tsx ==> Page
loading .js .jsx .tsx ==> Loading UI
not-found .js .jsx .tsx ==> Not Found UI
error .js .jsx .tsx ==> Error UI ({ error, reset })
route .js .ts ==> API endpoint
layout .js .jsx .tsx ==> Layout
//Nested__routes:
folder/folder ==> Nested route segment
folder/[folder] ==> Dynamic route segment
(folder) ==> Group routes without affecting routing
6. When to use Server and Client Components?
> Server Component:
/ Fetch data.
/ Access backend resources.
/ Keep sensitive information on the server.
/ Keep large dependencies on the server.
> Client Component:
/ Add interactivity and event listeners.
/ Use State and Lifecycle Effects.
/ Use browser-only APIs.
/ Use custom hooks that depend on state, effects, or browser-only APIs.
7. Using context in Client Components:
///:
'use client';
import { createContext } from 'react';
export const NameContext = createContext();
export default function NameProvider({ children }) {
return (
<NameContext.Provider value="">
{ children }
</NameContext.Provider>
);
};
///:
import NameProvider from '...';
use it inside your layout.
==> With the provider rendered at the root,
all other Client Components throughout your app
will be able to consume this context.
8. Sharing data between Server Components:
==> Since Server Components are not interactive and therefore
do not read from React state, you don't need React context
to share data.
==> Instead, you can use native JavaScript patterns for common
data that multiple Server Components need to access.
9. App Router:
1) Routing Fundamentals:
_ Tree: A convention for visualizing a hierarchical structure.
_ Subtree: Part of a tree, starting at a new root (first) and ending at the leaves (last).
_ Root: The first node in a tree or subtree.
_ Leaf: Nodes in a subtree that have no children.
_ URL Segment: Part of the URL path delimited by slashes.
_ URL Path: Part of the URL that comes after the domain (composed of segments).
2) Defining Routes:
* Root layout is required.
* Layouts can be nested.
* Layouts persist across routes and maintain state.
* Templates create a new instance for each of their children on navigation.
3) Modifying <head>:
export const metadata = {
title: '...',
description: '...',
}
10. Linking and Navigating:
* <Link> Component
* useRouter Hook
==> use usePathname() to determine if a link is active.
const pathname = usePathname();
const isActive = pathname.startsWith(link.href);
==> The useRouter hook allows you to programmatically change routes.
const router = useRouter();
router.push('/dashboard');
==> redirect: for server side rendering SSR
useRouter: for client side rendering CSR
11. Dynamic Routes:
==> A Dynamic Segment can be created by wrapping a folder's name in
square brackets: [folderName]. For example, [id] or [slug].
==> Dynamic Segments are passed as the params prop to layout, page,
route, and generateMetadata functions.
==> Dynamic Segments can be extended to catch-all subsequent
segments by adding an ellipsis inside the brackets [...folderName].
==> Catch-all Segments can be made optional by including the parameter
in double square brackets: [[...folderName]].
<==> The difference between catch-all and optional catch-all segments
is that with optional, the route without the parameter is also matched.
12. Loading UI and Streaming:
=> The file loading.js helps you create meaningful Loading UI (instant loading state).
=> You can also manually create Suspense Boundaries for your own UI components.
<Suspense fallback={ <Loading /> }>
<Page />
</Suspense>
=> Streaming allows you to break down the page's HTML into smaller chunks
and progressively send those chunks from the server to the client.
13. Error Handling:
=> The error.js file convention allows you to gracefully handle unexpected runtime errors.
=> Error components must be Client Components.
=> Errors bubble up to the nearest parent error boundary.
=> It is important to note that global-error.js must define its own <html> and <body> tags.
14. Parallel Routes:
=> Parallel Routing allows you to simultaneously or conditionally render one or more pages in the same layout.
=> Parallel Routing allows you to define independent error and loading states for each route as they're being
streamed in independently.
=> Parallel routes are created using named slots. Slots are defined with the @folder convention, and are passed
to the same-level layout as props.
=> Both useSelectedLayoutSegment() and useSelectedLayoutSegments() accept a parallelRoutesKey, which allows you
read the active route segment within that slot.
15. Intercepting Routes:
16. Route Handlers:
=> Route Handlers allow you to create custom request handlers for a given route
using the Web Request and Response APIs.
=> Route Handlers are defined in a route.js|ts file inside the app directory.
*** Supported HTTP Methods:
GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS
*** Extended NextRequest and NextResponse APIs
17. Styling:
12. Pending Actions:
import { experimental_useFormStatus as useFormStatus } from "react-dom";
const { pending } = useFormStatus();
13. NextAuth:
<> Set up your providers
<> Create your route handler:
> app > api > auth > [...nextauth] > route.ts
X. TypeScript:
==> Types:
{ children }: { children: React.ReactNode }
{ error, reset }: { error: Error, reset: () => void }
onChange > e: React.ChangeEvent
onSubmit > e: React.FormEvent
textarea > HTMLTextAreaElement
input > HTMLInputElement
Y. Fonts:
import { Font } from 'next/font/google';
const font = Font({ subsets: ['latin'], weight: ['400'] });
className={ `${ font.className }` }
Z. Tips:
==> When we call a server action from a server component, we have to do it over a form action.