joplin-notes/joplin notion extension/Web Development/React/next/Tips.md

Tips

• To import anything relative to src directory use @ like following code Structure

src
	app
		page.jsx
	components
		card.jsx

In src/app/page.jsx

import Card from '@/components/card'

export default function App(){
	<>
		<Card>Tools</Card>
	</>
}

In src/components/card

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