45 lines
No EOL
1.1 KiB
Markdown
45 lines
No EOL
1.1 KiB
Markdown
Tips
|
||
|
||
- To import anything relative to src directory use `@` like following code
|
||
Structure
|
||
```text
|
||
src
|
||
app
|
||
page.jsx
|
||
components
|
||
card.jsx
|
||
```
|
||
In `src/app/page.jsx`
|
||
```jsx
|
||
import Card from '@/components/card'
|
||
|
||
export default function App(){
|
||
<>
|
||
<Card>Tools</Card>
|
||
</>
|
||
}
|
||
```
|
||
In `src/components/card`
|
||
```jsx
|
||
export default function Card({ children }) {
|
||
const cardStyle = {
|
||
padding: "100px",
|
||
margin: "10px",
|
||
boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
|
||
border: "1px solid #ddd",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
};
|
||
|
||
return <div style={cardStyle}>{children}</div>;
|
||
}
|
||
|
||
```
|
||
- multiple root layouts
|
||
https://www.youtube.com/watch?v=X9_XqeqWBR0
|
||
|
||
Route grouping will be used so remove layout,jsx from root and instead use them in route group folders. Multiple layouts at same root is possible but not multiple pages so at whichever route there is page.jsx that will be considered as default route
|
||
Next.js App Router Multiple Root Layouts： Explained With Examples.mp4
|
||
https://files.catbox.moe/eiy18h.mp4
|
||
|