Untitled
Fold the Video
![[JS Mastery] Next.js 13 -0](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/9d0f3796-7905-4a43-b7c2-46cd8ea1d0b6.png)
![[JS Mastery] Next.js 13 -2](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/6b12ef24-5c88-4db7-87d7-c4ac5d467344.png)
![[JS Mastery] Next.js 13 -3](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/1b26419c-0221-4048-b92e-19289dbb8543.png)
![[JS Mastery] Next.js 13 -5](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/dd748760-a570-4e89-85ab-61608438d9e1.png)
next js uses file path as a route
![[JS Mastery] Next.js 13 -8](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/8c1d4bbd-bfc6-445f-b28a-b01d15d55c1d.png)
![[JS Mastery] Next.js 13 -9](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/b23d0445-9146-4270-9b3b-f54d03c86c17.png)
![[JS Mastery] Next.js 13 -10](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/33187940-b0da-4b93-9fd1-dee1b4f852cb.png)
![[JS Mastery] Next.js 13 -11](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/86e3503a-c735-485d-80d8-1823c6b3bdf4.png)
![[JS Mastery] Next.js 13 -12](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/dd741662-8dbf-4e74-bb7e-2adf07877ff6.png)
when needed!!dd
![[JS Mastery] Next.js 13 -14](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/73eda039-6b2f-4cc1-8205-664de148f7e8.png)
![[JS Mastery] Next.js 13 -15](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/d9effd4c-7d78-495c-b6e1-10c3e6646a84.png)
app에서
Their experience. Now in case you want to turn that server side component by default into a client-side. One, you need to add the use client directive.
The top of your page, to turn it into a client-side component, using the boat, the client components and the server components allows us to leverage the benefits of server-side rendering while still Rising react capabilities for building Dynamic and interactive user interfaces. This is an example of a typical server side component.
It is a simple component, consisting of a navigation bar that has a logo and a search bar. It also has some main content with ap tag.
![[JS Mastery] Next.js 13 -22](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/9c5989f5-78e4-4417-a340-a638b5d140b0.png)
when to use client and server component?
![[JS Mastery] Next.js 13 -24](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/bd43caeb-c71b-46f8-8d2d-d6d37f0a6e40.png)
![[JS Mastery] Next.js 13 -25](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/3837bb00-94d4-4cce-a4e5-34371f151822.png)
everything is file based!
no need to add router
![[JS Mastery] Next.js 13 -28](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/ae97ffc3-7bb1-4014-a1df-83abfca2d11f.png)
-> react
![[JS Mastery] Next.js 13 -30](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/cb8853b6-1433-4d67-8506-f2aaa5334df3.png)
-> nextjs
![[JS Mastery] Next.js 13 -32](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/339f29ec-410a-421c-8f42-65b5fc42049c.png)
layout을 특정 라우트에만 적용하는 것도 가능
![[JS Mastery] Next.js 13 -34](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/dd3525ce-14fd-4a19-9316-e600d689a3e8.png)
넥스트는 SSG를 디폴트로 한다.
![[JS Mastery] Next.js 13 -36](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/62a0e286-9b0d-4116-8710-ba8d5b69a36b.png)
![[JS Mastery] Next.js 13 -37](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/b477f59d-467c-4e75-bfe4-128b7270806b.png)
코드를 깔끔히 하기 위해서 api 폴더에 넣는 것을 추천
page.js와 함께 route.js가 위치하면 안된다
![[JS Mastery] Next.js 13 -40](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/899aa4f7-ec3b-4c7d-af29-d6f96f3aa75b.png)
![[JS Mastery] Next.js 13 -41](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/5ce2d946-62d1-4607-ba9e-b5e33d46a7e6.png)
![[JS Mastery] Next.js 13 -42](https://dxsz4k2ia0fcw.cloudfront.net/public/capture_images/f56f61da31514affabb1053a80dd8b26/296ea5e2-8e5e-49ba-8bfa-8ae717dd72fd.png)
Last Updated:
Summarize & share videos seamlessly
Loading...