Web/NextJs

Next.js - useSWR

전통적을 최상위 레벨 컴포넌트에서 useEffect를 사용해 데이터를 한 번 가져오고, 이를 props를 통해 자식 컴포넌트에 전달합니다. // 페이지 컴포넌트 function Page () { const [user, setUser] = useState(null) // 데이터 가져오기 useEffect(() => { fetch('/api/user') .then(res => res.json()) .then(data => setUser(data)) }, []) // 전역 로딩 상태 if (!user) return return } // 자식 컴포넌트 function Navbar ({ user }) { return ... } function Content ({ user }) { return Welcome bac..

Next.js - Layouts

Single Shared Layout with Custom App 만약 내가 전체의 애플리케이션에서 하나의 레이아웃만을 가지고 있다면 나는 Custom App을 생성할 수 있다. 그리고 이 Custom App으로 나의 애플리케이션 레이아웃을 감싸면 된다. 또한 만약 내가 많은 레이아웃을 사용하고 싶다면 내 페이지에 있는 getLayout 속성을 추가해서 사용하면 된다. // pages/index.js import AppLayout from "../components/AppLayout"; import styles from "../styles/Home.module.css"; export default function Home() { return ; } Home.getLayout = (page) => { re..

Next.js - Built-in CSS Support

Adding Global StyleSheet 만약에 stylesheet를 내 애플리케이션에 추가하고 싶다면 'pages/_app.js'에 css파일을 추가해야 한다. 이는 Next.js가 JavaScript의 import를 확장했기 때문에 가능한 일이다. // style.css body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px 20px 60px; max-width: 680px; margin: 0 auto; } // pages/_app.js import '../styles.css' // This default export is required in ..

Next.js - Data Fetching ( getStaticProps, getStaticPaths )

getStaticProps 만약 우리가 'getStaticProps'라는 함수를 export했다면 Next.js는해당 페이지를 build-time에 pre-render할 것이다. getServerSideProps는 request시에라는 점에서 차이가 있다. 그래서 Next.js에서 SSG인 getStaticProps를 추천하는 이유도 여기에 있는 것 같다. - use의 request전에 build-time에 pre-rendering되어있으면 좋겠는 곳 - 데이터가 공공적으로 캐싱될 수 있는 곳 - SEO최적화가 필요하고 매우 빠르게 접속될 수 있는 곳, 그리고 CND에 의해 빠르게 캐싱될 수 있는 CDN의 작동 원리 1. 웹 브라우저가 ..