The document provides a guide for getting started with Next.js, emphasizing its ease of use and features like server-side rendering (SSR) and code splitting. It outlines steps for setting up a project from scratch and using Next.js, highlighting its advantages, including SEO optimization and ready-to-use configurations. The document concludes with key references for further information on React and Next.js.

1. Getting started with Next.js
Feb 27, 2020
Gokhan Sari
@hgokhansari
WebGazer

2. A web application!

3. component
/kəmˈpoʊ.nənt/
a part that combines with other parts to form
something bigger

4. React!

5. Starting a React project
Webpack
Babel
Routing

6. Going to production
Static export
Code splitting
Server-side rendering

7. React doesn’t have these.
And that’s a good thing!

9. Starting a project
(from scratch)
1. yarn init best-app-ever
2. yarn add --dev webpack
3. Start to read about babel and presets
4. Understand the history of javascript
5. Set up webpack loaders for images
6. Set up hot code reloading for dev environment
7. ….

10. Starting a project
(Next.js)
$ yarn create next-app

11. Starting a project
(Next.js)
● Batteries included
● Sane defaults
● Fully extensible
● Ready for production

12. Server-Side Rendering
(SSR)
and
Client-Side Rendering
(CSR)

13. Client-Side Rendering (CSR)

14. Server-Side Rendering (SSR)
First page is ready to render
HTML, like good old days
And then we have a regular
single-page application

15. Client-Side Rendering (CSR)

17. Server-Side Rendering (SSR)

19. CSR SSR

20. Server-Side Rendering (SSR)
■ Search engine optimization
■ Social media optimization
■ User experience

21. Code splitting

22. Code splitting
bundle.js
The user doesn’t need all of your 19 MB bundle.js in
order to see your ‘about’ page.

23. Code splitting
It breaks javascript bundle into pieces and loads only when
needed.
users.js
x.js
products.js
y.js
z.js
common.js
users.js
products.js

24. Code splitting
Next.js does automatic code splitting and it is based on
the pages in your app.
“For example, if one of your modules is used at-least in half of
your pages, then it moves into the main JavaScript bundle. If
not, that module stays inside the page's bundle.”

25. Static exporting
● Marketing websites
● Documentations
● Blogs

26. To sum up
● Boilerplate-free
● Featureful by default
● Server-side rendering
● Code splitting
● Static exporting
● UNOPINIONATED

27. References
● Cambridge dictionary (https://dictionary.cambridge.org)
● React Documentation (https://reactjs.org/docs/)
● Next.js Documentation (https://nextjs.org/docs/)
● Reddit - /r/ProgrammerHumor
(https://www.reddit.com/r/ProgrammerHumor/)