# Nextjs Introduction
http://localhost:3000
브라우저 확인
react같은 library를 사용할 때는 원할 때 언제든 어떤 방법으로든 부르면 된다. 하지만 next.js같은 framework에서는 특정한 규칙을 따라야한다. 파일의 이름이 중요하다. jsx도 사용할 수 있다.
// 앱의 홈은 기본적으로 index.js에서 나온다.
export default function Home() {
return "Hi"
}
export default function Potato(){
return "about us"
}
http://localhost:3000/about
브라우저 확인
next.js의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 점이다. hydration은 react.js를 프론트엔드 안에서 실행하는 것을 말한다. next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만드는데 이게 component들을 render시킨다. 렌더링이 끝났을 때 그건 HTML이 되고 next.js는 그 HTML을 페이지의 소스코드에 넣어준다. 유저는 자바스크립트와 react.js가 로딩되지 않았더라도 콘텐츠를 볼 수 있게된다. 그리고 react.js가 로딩 되었을 때 기본적으로 이미 존재하는 것들과 연결이 되어서 일반적인 react.js 앱이 된다. SEO에 매우 좋다.
// next.js 어플리케이션의 클라이언트 사이드 네비게이션을 제공해준다.
import Link from 'next/link';
import {useRouter} from 'next/router';
export default function NavBar(){
const router = useRouter();
console.log(router); // location에 관한 정보들을 얻는다.
return (
<nav>
<Link href="/">
<a className='hello' style={{color:router.pathname==="/" ? "red" : "blue"}}>Home</a>
</Link>
<Link href="/about">
<a className='about' style={{color:router.pathname==="/about"? "red" : "blue"}}>About</a>
</Link>
</nav>
);
}
// index.js
import NavBar from "../components/NavBar";
export default function Home() {
return(
<div>
<NavBar />
<h1>Home</h1>
</div>
)
}
// about.js
import NavBar from "../components/NavBar";
export default function Potato(){
return <div>
<NavBar />
<h1>About</h1>
</div>
}
// NavBar.module.css
.active {
color: tomato;
}
.link {
text-decoration: none;
}
// NavBar.js
// next.js 어플리케이션의 클라이언트 사이드 네비게이션을 제공해준다.
import Link from 'next/link';
import {useRouter} from 'next/router';
import styles from './NavBar.module.css';
export default function NavBar(){
const router = useRouter();
console.log(router); // location에 관한 정보들을 얻는다.
return (
<nav>
<Link href="/">
<a className={`${styles.link} ${router.pathname==="/"? styles.active : ""}`}>Home</a>
</Link>
<Link href="/about">
<a className={[
styles.link,
router.pathname==="/about"? styles.active: "",]
.join(" ")}>About</a>
</Link>
</nav>
);
}
// 형태
<style jsx>{`
nav {
background-color: tomato;
}
a {
text-decoration: none;
}
`}</style>
// NavBar.js
import Link from 'next/link';
import {useRouter} from 'next/router';
export default function NavBar(){
const router = useRouter();
console.log(router); // location에 관한 정보들을 얻는다.
return (
<nav>
<Link href="/">
<a className={router.pathname==="/"? "active": ""}>Home</a>
</Link>
<Link href="/about">
<a className={router.pathname==="/about"? "active": ""}>About</a>
</Link>
<style jsx>{`
nav {
background-color: tomato;
}
a {
text-decoration: none;
}
.active {
color: yellow;
}
`}</style>
</nav>
);
}
// components/_app.js
import NavBar from "../components/NavBar";
// _app.js에서는 golbal styles를 import할 수 있다.
import "../styles/globals.css";
export default function App({Component, pageProps}){
return (
<div>
<NavBar />
<Component {...pageProps} />
<span>hello</span>
<style jsx global>{`
a {
color: white;
}
`}</style>
</div>
)
}
// components/Layout.js
import NavBar from "./NavBar"
export default function Layout({children}){
return (
<>
<NavBar />
<div>{children}</div>
</>
)
}
// components/Seo.js
import Head from "next/head";
export default function Seo({title}){
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}
// index.js
import Head from "next/head";
import Seo from "../components/Seo";
export default function Home() {
return(
<div>
<Seo title="Home" />
<h1 className="active">Home</h1>
</div>
)
}
// about.js
import Head from "next/head";
import Seo from "../components/Seo";
export default function Potato(){
return (
<div>
<Seo title="About" />
<h1 className="active">About</h1>
</div>
)
}
https://www.themoviedb.org/ 에서 데이터를 가져와 사용할 것
1. API key
2. API - API개요(API Overview) - developers.themoviedb.org. 클릭 -
Movies, GET /movie/popular - Movies, Try it out
// index.js
import { useEffect, useState } from "react";
import Seo from "../components/Seo";
const API_KEY="ca91d4fe545a80a5a8f72d6881928f5c";
export default function Home() {
const [movies, setMovies] = useState();
useEffect(()=>{
(async()=>{
const {results}=await (
await fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
)
).json();
// console.log(data);
setMovies(results);
})();
},[]);
return(
<div className="container">
<Seo title="Home" />
{!movies && <h4>Loading...</h4>}
{movies?.map((movie)=>(
<div className="movie" key={movie.id}>
<img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
<h4>{movie.original_title}</h4>
</div>
))}
<style jsx>{`
.container {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 20px;
gap: 20px;
}
.movie img {
max-width: 100%;
border-radius: 12px;
transition: transform 0.2s ease-in-out;
box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;
}
.movie:hover img {
transform: scale(1.05) translateY(-10px);
}
.movie h4 {
font-size: 18px;
text-align: center;
}
`}</style>
</div>
);
}
// NavBar.js
// next.js 어플리케이션의 클라이언트 사이드 네비게이션을 제공해준다.
import Link from 'next/link';
import {useRouter} from 'next/router';
export default function NavBar(){
const router = useRouter();
console.log(router); // location에 관한 정보들을 얻는다.
return (
<nav>
<img src="/vercel.svg"/>
<div>
<Link href="/">
<a className={router.pathname==="/"? "active": ""}>Home</a>
</Link>
<Link href="/about">
<a className={router.pathname==="/about"? "active": ""}>About</a>
</Link>
</div>
<style jsx>{`
nav {
display: flex;
gap: 10px;
flex-direction: column;
align-items: center;
padding-top: 20px;
padding-bottom: 10px;
box-shadow: rgba(50,50,93,0.25) 0px 50px 100px -20px,
rgba(0,0,0,0.3) 0px 30px 60px -30px;
}
img {
max-width: 100px;
margin-bottom: 5px;
}
nav a {
font-weight: 600;
font-size: 18px;
}
.active {
color: tomato;
}
nav div {
display: flex;
gap: 10px;
}
`}</style>
</nav>
);
}