# Next.JS Notes
- Server rendered React
- Pages in pages dir correspond to routes in app
- Don't need to bring in React for every page
- Hot code reloading out of box for Next

## Install
`npm i next react react-dom`
- Add dev script in package.json: `dev`: `next`
- *if diff port than 3000 needed*: `dev`: `next -p <port>`
- Create `pages` dir at root
- Run `dev`, .next folder is generated

## Init Pages
- Add index.js to pages dir:
```react
const Index = () => (
<div>Index Page</div>
)

export default Index
```

## Adding Layout:
- Create `components/Layout.js`
```react
export default ({ children, title }) => (
<div>
  <header>
    <Link href="/"><a>Home</a></Link>
    <Link href="/new"><a>New</a></Link>
  </header>
  <h1>{title}</h1>
  {children}
  <footer>footer</footer>
</div>
)
```
- Use Layout: <Layout title="stuff">{everything-else}</Layout>

## Routing: Use History API, not server requests for new routes
- Add `import Link from "next/link"`
```react
<Link href="/"><a>Go to page</a></Link>
```

## Serving Images
- Add `static` folder at root, add imgs
- Reference img in code simply with: `<img src="/static/<img>.png">`

## Add styling
```react
<style jsx>{`
.root {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

`}
</style>
```

## Add global styling
```react
<style global jsx>(`
body {
  margin: 0;
  font-size: 110%;
}
`)
</style>
```