Everytime you select a JavaScript framework, you set out on a hero's journey, much like Frodo who needs to cast the one ring into the fires of Mount Doom. See how models of mythology and narrative fiction help us discover new technologies and help us overcome obstacles on our very personal road of trials. With Zeit's Next.js, we set out on an incremental path of adoption. Being offered just enough API surface to fulfill our direct needs and to master our skills.

1. The hero’s journey
in JavaScript frameworks
@ddprrt • fettblog.eu

2. Hero’s journey

3. Hero’s journey
Not the tour of heroes!

4. !

5. !
call to adventure

6. !
call to adventure
crossing the threshold

7. !
call to adventure
crossing the thresholdknown
unknown

8. !
call to adventure
crossing the threshold
abyss
known
unknown

9. !
call to adventure
crossing the threshold
abyss
the road of trials
known
unknown

10. !
call to adventure
crossing the threshold
metamorphosis
abyss
the road of trials
known
unknown

11. !
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
abyss
the road of trials
known
unknown

12. !
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
known
unknown

13. !
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
known
unknown

14. It’s like learning a JavaScript framework!

15. !
call to adventure
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials

16. !
crossing the threshold
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
starting a new project

17. !
metamorphosis
the ultimate boon
returning the boon
abyss
the road of trials
starting a new project
hello world

18. !
metamorphosis
the ultimate boon
returning the boon
abyss
starting a new project
hello world
googling the error message

19. !
metamorphosis
the ultimate boon
returning the boon
starting a new project
hello world
googling the error message
going
into
production

20. !
the ultimate boon
returning the boon
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology

21. !
returning the boon
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology
adding
framework to CV

22. !
starting a new project
hello world
googling the error message
going
into
production
understanding the
technology
adding
framework to CV
answering questions on
stack overflow

23. It’s a bumpy road ahead!

24. Three act structure

25. Three act structure

26. Act One Act Two Act Three
Three act structure

27. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Three act structure

28. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure

29. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Plot Twist!

30. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Plot Twist!

31. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!

32. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!

33. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!

34. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

35. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

36. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

37. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

38. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

39. Beginning
Inciting
incident
Second
thoughts
Act One Act Two Act Three
Obstacles
Obstacles
Three act structure
Climax
Denouement
End
Plot Twist!
learning curve

40. next.js

41. Act One: Setup
The Beginning
Inciting incident
Second thoughts
call to adventure
crossing the threshold

42. Act One: Setup
pages/index.js export default () => <h1>Hello World</h1>
package.json {
"name": "hello-world",
"scripts": {
"dev": "next",
},
"dependencies": {
"next": "latest",
"react": "^16.0.0",
"react-dom": "^16.0.0"
}
}

43. Act One: Setup
pages/index.js import Link from ‘next/link’
export default () =>
<>
<h1>Hello World</h1>
<Link href=‘/about’><a>About</a></Link>
</>
pages/about.js export default () =>
<>
<h1>Hello About</h1>
</>

44. Act One: Setup
Second thoughts? import Head from ‘next/head’
export default () =>
<>
<Head>
<title>A podcast about JavaScript</title>
</Head>
<h1>Hello World</h1>
</>

45. Act Two: Confrontation
Obstacles
Obstacles
Plot Twist
the road of trials
the abyss

46. Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withTypescript()

47. Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withCSS(withTypescript())

48. Act Two: Confrontation
next.config.js const withTypescript =
require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withMDX = require('@zeit/next-mdx')()
module.exports =
withMDX(withCSS(withTypescript()))

49. Act Two: Confrontation
about.js import ArticleLayout
from '../components/ArticleLayout';
import About from '../articles/about.mdx';
import Head from 'next/head';
export default () => <ArticleLayout>
<Head>
<title>About ScriptCast</title>
</Head>
<About />
</ArticleLayout>;

50. Act Two: Confrontation The Abyss!

51. Act Two: Confrontation
server.js const express = require('express');
const next = require(‘next');
const app = next();
const handle = app.getRequestHandler();
The Abyss!

52. Act Two: Confrontation
server.js const express = require('express');
const next = require(‘next');
const app = next();
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
server.get('/api', fetchRSS());
server.get('*', (req, res) => handle(req, res));
});
The Abyss!

53. Act Three: Resolution
Climax
Denouement
End
metamorphosis
the ultimate boon
returning the boon

54. Act Three: Resolution
import App, { Container } from 'next/app'
import React from ‘react';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props;
return
<Container>
<Component {...pageProps} />
</Container>
}
}
_app.js

55. Act Three: Resolution
import App, { Container } from 'next/app'
import React from ‘react';
import Player from ‘../components/Player’
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props;
return
<Container>
<Component {...pageProps} />
<Player />
</Container>
}
}
_app.js

56. the ultimate boon!

57. returning the boon … to you!

61. incremental adoption

63. fin.