Video URL: https://youtu.be/ZVnjOPwW4ZA?t=1647 Current time: 00:27:27
- A framework for building fast and search engine friendly applications
- Built on top of React
- Remember, React is a library for building interactive UIs
- NextJS is a framework, which consists of libraries, tools and conventions that help application development
- It has a router library, no need to use a separate one!
- It has a compiler, CLI, Node.JS runtime (JS code can be executed on a browser, the client, or the Node.JS, a server.)
- This means Full Stack Development is possible! (Front end and back end).
- The Node.JS runtime is the back-end, which the web browser is the front-end.
- Node.JS can allow us to render components on the server, and then send to the client. Which is Server Side Rendering (SSR). Allows for fast and search engine friendly applications.
- Static Site Generation (SSG) - prerender certain pages and components, that have static data, when we build the application. They are rendered once and served when needed. Can make applications fast.
Want to create an application in your current directory? Run the following command:
npx create-next-app@latest .
The app folder is the app router, which is the container for the routing system (the router is based on the file system).
Fast Refresh, anytime you make a change, they are reflected immediately.
The Public folder is where we can store assets like iamnges.
We can create a folder under the app folder to create routes. This folder can have a file called page.tsx to create a route.
Using the Link component from NextJS, it downloads the contents of the page, this is Client Side Navigation.
- Large bundles
- Resource intensive
- No SEO
- Less secure
- Smaller bundles
- Resource efficient
- SEO
- More secure
Server Components cannot
- Listen to browser events
- Access browser APIs
- Maintain state
- Use effects
All components inside the app folder are Server Components by default.
- Two ways, Client and Server
- Fetching on the Client
- useState() + useEffect()
- React Query
- Large Bundles
- Resource intensive
- No SEO
- Less secure
- Extra roundtrip to server
https://jsonplaceholder.typicode.com/ - useful for testing APIs
- Storing data somewhere that is faster to access.
- We can get data from the following sources:
- Memory (faster)
- File System
- Network (slower)
- NextJS comes with a data cache! So when we use the fetch function (for example), NextJS will automatically store the result in a cache which is based on the file system. So the next time we need the same piece of data, NextJS will get the data from the cache.
- We do have control over this.
- Render at build time
- If we have pages or components that have static data, we can have NextJS render them once when we build the application for production.
- Render at request time
Ready to build for production? Use npm run build and then npm start
Remember; Rendering -> Client Side -> Server Side -> Static (at build time) -> Dynamic (at request time)
Tailwind CSS is a popular CSS framework.
global.css is reserved for styles that are truly global. If styling a page or a component, then a CSS module is recommended.
A CSS Module is a file that is scoped to a component/page, it can prevent styles from clashing.
An example of a CSS Module is ProductCard.module.css
You can't use hyphens in CSS Module names, camel case is used.
Post CSS is used to transform the class names.
You can group CSS modules and TSX files into a folder.
A popular CSS framework, that uses the concept of utility classes. Worth learning about, lots of modern applications use this framework, useful for the job market. When you build your application, our final CSS bundle will only have the utility classes that have been used in the markup.
A popular component library for Tailwind CSS. Think of it as Bootstrap for Tailwind CSS.