Next.js

"Next.js is a minimalistic framework for server-rendered React applications."

Install

Configure

					package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
				

Create

					pages/index.js

export default
  () => <h1>Don't panic</h1>
				

Devel

					$ yarn dev
http://localhost:3000
				

Deploy

					yarn global add now
now
				

Just 5 steps!

4 commands
6 lines of code

Long time ago in a universe far,
far away....

JS

					var msg = "Thanks for ..."
function scroll() {
  window.status = msg
  msg = msg.substring[...]
  setTimeout("scroll()",150)
}
				

CSS

Tables layout

Not cool...

But easy

Today

New ways

and tools

Express.js

for dynamic pages

1. Install
2. Configure routes
3. Create server
4. Update start script

~ 16

lines of code

Apollo GraphQL

for data

1. Install
2. Setup connection to server
3. Define queries
4. Use data in components

± 30

lines of code

and 1 registration

CSS-in-JS

default styled-jsx

1. Install
2. Setup SSR
3. Use

± 10

lines of code

for styled-components

Test

with Storybook

1. Install
2. Configure
3. Create stories
4. Test

~ 10

lines of code

¯\_(ツ)_/¯

DON'T
PANIC

Links

• This slides
• Demo project
• Graphcool