Next.js is a React framework that allows building universal apps that work on both client and server. It addresses issues with SEO, performance, and code splitting in single-page apps. Next.js provides out-of-the-box features like server-side rendering, automatic code splitting, optimized builds, and more. It has a simple project structure where pages are individual React components and routing is file-based. While routing can be customized, the default routing only supports route paths that resolve to page files. Overall, Next.js streamlines universal React apps with its features and optimizations.

1. Universal apps in Next.js

2. Contents
💣 Problems in React SPAs
💻 What is Next.js
💪 Main features and advantages
😿 And one disadvantage
💔 Alternatives
📚 Resources

3. Problems with SPAs
SEO is a problem

4. Problems with SPAs
SEO is a problem
SSR could be hard
Need to fetch initial data on
server and pass it to client
(redux helps)

5. Problems with SPAs
SEO is a problem
SSR could be hard
Universal React could be hard
Routing, different context
runs the same code

6. Problems with SPAs
SEO is a problem
SSR could be hard
Universal React could be hard
Build system and performance
😭

7. Problems with SPAs
SEO is a problem
SSR could be hard
Universal React could be hard
Build system and performance
Hard to extend
fe. ejecting
create-react-app

8. Next.js for a rescue
Made by
Quite popular
Well maintained
v5.x.x released recently

9. Next.js for a rescue
Built on top of:

10. Next.js for a rescue
📤 Works out of the box & zero config
🕐 Is one dependency (+ react)
🐈 Easy to extend and to revert

11. Next.js for a rescue
💵 Both production build with server
🆒 and static site export
🚀 Many performance tricks
✂ Code splitting
⚡ Small size

12. Getting started
npm install next react react-dom
One dependency
Dev server
Production build & server
npx next
npx next build && npx next start

13. Project structure
Required
Next resolves
/ route by default

14. Project structure
One view = one file
Next resolves /blog

15. Project structure
Overrides default
error page

16. Project structure
Overrides default
document structure

17. Project structure
Static files are
served from here

18. Project structure
Extend babel
Set config and
extend f.e webpack

19. Sample page
Just a React component

20. Sample page
Special Next lifecycle method

21. Sample page
You can detect client or server
You can get access to
request and response!

22. Sample page
I’m a thunk 🐘
Redux needs init on every page
Store is injected to method
Initial data fetching done
before render

23. Extending base HTML
Added styled-components

24. Extending Webpack

25. Extending babel

26. Some Extras
Prefetching

27. Some Extras
Dynamic components

28. Disadvantage - routing
/ resolves to pages/index.js
/blog resolves to pages/blog.js
/blog?post=my-post resolves to pages/blog.js
/blog/my-post doesn’t resolve

29. Disadvantage - routing
/ resolves to pages/index.js
/blog resolves to pages/blog.js
/blog?post=my-post resolves to pages/blog.js
/blog/my-post doesn’t resolve

30. Custom server & routes

31. Alternatives
Walmart’s Electrode
after.js
Alibaba’s beidou
create-react-app
razzle

32. Resources
https://github.com/zeit/next.js/tree/canary/examples
https://github.com/fridays/next-routes
https://github.com/unicodeveloper/awesome-nextjs

33. Thx bye