Table of Contents
Useful VS Code extensions
ES7+ React/Redux/React-Native snippets
- Id: dsznajder.es7-react-js-snippets
- Description: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
- Version: 4.4.3
- Publisher: dsznajder
- VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Tailwind CSS IntelliSense
- Id: bradlc.vscode-tailwindcss
- Description: Intelligent Tailwind CSS tooling for VS Code
- Version: 0.10.5
- Publisher: Tailwind Labs
- VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Name: JavaScript and TypeScript Nightly
- Id: ms-vscode.vscode-typescript-next
- Description: Enables typescript@next to power VS Code’s built-in JavaScript and TypeScript support
- Version: 5.5.20240322
- Publisher: Microsoft
- VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
Creating the first Next.js project
npx create-next-app@13.4
✔ What is your project named? … next-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
Creating a new Next.js app in /Users/xxx/Downloads/Learning/Next.js/next-app.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 369 packages, and audited 370 packages in 13s
136 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created next-app at /Users/xxx/Downloads/Learning/Next.js/next-app
What server components cannot do:
- Listen to browser events
- Access browser APIs
- Maintain state
- Use effects
Client side vs server side: "use client"
Method 1: set the whole component to be built on the client side
"use client";
import React from "react";
const ProductCard = () => {
return (
<div>
<button onClick={() => console.log("Clicked")}>Add to cart</button>
</div>
);
};
export default ProductCard;
Method 2: Only set some parts of a component to be built on the client side by creating separate single components for each component.
In this example we created a new component, AddToCart
"use client";
import React from "react";
const AddToCart = () => {
return (
<div>
<button onClick={() => console.log("Clicked")}>Add to cart</button>
</div>
);
};
export default AddToCart;
import React from "react";
import AddToCart from "./AddToCart";
const ProductCard = () => {
return (
<div>
<AddToCart />
</div>
);
};
export default ProductCard;
Fetch data
import React from "react";
interface User {
id: number;
name: string;
}
const UsersPage = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const users: User[] = await res.json();
return (
<>
<h1>Users List</h1>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</>
);
};
export default UsersPage;
Cache data
Data sources:
- Memory
- File system
- Network
import React from "react";
interface User {
id: number;
name: string;
}
const UsersPage = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/users", {
cache: "no-store",
});
const users: User[] = await res.json();
return (
<>
<h1>Users List</h1>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</>
);
};
export default UsersPage;
import React from "react";
interface User {
id: number;
name: string;
}
const UsersPage = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/users", {
next: { revalidate: 10 }, // Fetch data every 10 seconds
});
const users: User[] = await res.json();
return (
<>
<h1>Users List</h1>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</>
);
};
export default UsersPage;
Static vs Dynamic
○ (Static) prerendered as static content
λ (Dynamic) server-rendered on demand using Node.js
Rendering:
- Client-side
- Serve-side
- Static (at built time)
- Dynamic (at request time)
