Next.js Notes

nextjs-notes.md

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:

const Index = () => (
<div>Index Page</div>
)

export default Index

Adding Layout:

• Create components/Layout.js

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: {everything-else}

Routing: Use History API, not server requests for new routes

• Add import Link from "next/link"

<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

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

`}
</style>

Add global styling

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