Intro to Next.js

Presentation given at 25 at React.Sofia Meetup

Links for the talk:

* https://nextjs.org/
* https://yourstack.com/
* https://blog.logrocket.com/dealing-with-links-in-next-js/
* 
https://github.com/zeit/next.js/tree/canary/examples


Transcript

1. Radoslav Stankov 25/02/2020
   

   View Slide

2. Radoslav Stankov
   @rstankov
   blog.rstankov.com

   twitter.com/rstankov

   github.com/rstankov

   speakerdeck.com/rstankov
   

   View Slide

3. View Slide

4. https://speakerdeck.com/rstankov
   

   View Slide

5. View Slide

6. What is NEXT.js?
   

   View Slide

7. https://nextjs.org
   

   View Slide

8. no need to manage your Babel/Webpack

   server side rendering
   code splitting by default
   decent routing system
   (optional) API support
   dynamic loading support
   build in support for
   TypeScript
   CSS modules
   

   View Slide

9. View Slide

10. View Slide

11. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

12. export default {
    root: () => '/',
    static: {
    about() => '/about',
    // ...
    }
    profiles: {
    people: () => '/people',
    show: ({ slug }: { slug: string }) => `/@${slug}`,
    // ...
    },
    // ...
    };
    path.ts
    

    View Slide

13. import paths from 'ph/paths';
    

    paths.root(); // => /
    paths.static.about(); // => /about/
    paths.profiles.people(); // => /people
    paths.profiles.show(profile); // => /@rstankov
    

    View Slide

14. Handling links
    

    View Slide

15. 
    About
    
    

    View Slide

16. 
    
    About
    
    

    View Slide

17. import * as React from 'react';
    import Link from 'next/link';
    interface IProps extends React.AnchorHTMLAttributes {
    to: string;
    // we can add more properties we need from next/link in the future
    }
    interface IProps extends React.AnchorHTMLAttributes {
    to: string;
    prefetch?: boolean;
    }
    export default React.forwardRef(({ to, prefetch, ...props }: IProps, ref: any) => {
    return (
    
    
    
    );
    });
    

    View Slide

18. 
    Product 1
    
    

    View Slide

19. 
    Product 1
    
    
    

    View Slide

20. Product 1;
    

    View Slide

21. 
    Product 1;
    

    View Slide

22. export default {
    about: '/about',
    contact: '/contact',
    product(product: { id: string }) {
    return {
    href: '/products/[id]',
    as: `/products/${id}`,
    };
    },
    };
    

    View Slide

23. interface IProps extends React.AnchorHTMLAttributes {
    to: string | { href: string, as: string };
    prefetch?: boolean;
    }
    export default React.forwardRef(
    ({ to, prefetch, ...props }: IProps, ref: any) => {
    if (typeof to === 'string') {
    return (
    
    
    
    );
    }
    return (
    
    
    
    );
    },
    );
    

    View Slide

24. https://blog.logrocket.com/dealing-with-links-in-next-js/
    

    View Slide

25. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

26. pages/profiles/[slug]/index.ts
    

    View Slide

27. import page from '~/routes/profiles/show';
    export default page;
    pages/profiles/[slug]/index.ts
    

    View Slide

28. import page from '~/routes/profiles/show';
    export default page;
    pages/profiles/[slug]/index.ts
    
    

    View Slide

29. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

30. Component as directory
    routing/
    profiles/
    show/
    SubComponent1/
    SubComponent2/
    Query.graphql
    index.js
    styles.css
    utils.js
    

    View Slide

31. Loading State
    Page Life Cycle
    

    View Slide

32. Loading State
    Page Life Cycle
    

    View Slide

33. Loading State
    Error State
    Page Life Cycle
    

    View Slide

34. Loading State
    Not Found Error
    Server Error
    Authorization
    Error
    Authentication
    Error
    Error State
    Page Life Cycle
    

    View Slide

35. Loading State
    Not Found Error
    Server Error
    Authorization
    Error
    Authentication
    Error
    Error State
    Loaded State
    Page Life Cycle
    

    View Slide

36. Loading State
    Not Found Error
    Server Error
    Authorization
    Error
    Authentication
    Error
    SEO
    Error State
    Analytics
    Loaded State
    Page Life Cycle
    ???
    

    View Slide

37. Loading State
    Not Found Error
    Server Error
    Authorization
    Error
    Authentication
    Error
    SEO
    Error State
    Analytics
    Loaded State
    render
    Page Life Cycle
    ???
    

    View Slide

38. wraps Apollo query
    handles page states
    handles errors
    handles authentication
    handles authorization
    handles SEO tags
    handles feature flags
    type safe
    createPage
    createPage({
    component:
    query:
    queryVariables:
    requireLogin:
    requirePermissions:
    requireFeature:
    tags:
    title:
    titleNoPrefix:
    );
    

    View Slide

39. import createPage from '~/utils/createPage';
    import ProfileLayout from '~/layouts/Profile';
    import { ProfileShowPage } from '~/graphql/types';
    import QUERY from './Query';
    export default createPage({
    query: QUERY,
    queryVariables: ({ slug }) => ({ slug }),
    requireLogin: true,
    requirePermissions: ({ profile }) => profile.canManage,
    requireFeature: 'feature_flag',
    tags: ({ profile }) => profile.seoTags,
    title: ({ profile }) => profile.name,
    component: ({ data: { profile } }) => (
    /* code */
    ),
    });
    

    View Slide

40. import createPage from '~/utils/createPage';
    import ProfileLayout from '~/layouts/Profile';
    import { ProfileShowPage } from '~/graphql/types';
    import QUERY from './Query';
    export default createPage({
    query: QUERY,
    queryVariables: ({ slug }) => ({ slug }),
    requireLogin: true,
    requirePermissions: ({ profile }) => profile.canManage,
    requireFeature: 'feature_flag',
    tags: ({ profile }) => profile.seoTags,
    title: ({ profile }) => profile.name,
    component: ({ data: { profile } }) => (
    /* code */
    ),
    });
    

    View Slide

41. import createPage from '~/utils/createPage';
    import ProfileLayout from '~/layouts/Profile';
    import { ProfileShowPage } from '~/graphql/types';
    import QUERY from './Query';
    export default createPage({
    query: QUERY,
    queryVariables: ({ slug }) => ({ slug }),
    requireLogin: true,
    requirePermissions: ({ profile }) => profile.canManage,
    requireFeature: 'feature_flag',
    tags: ({ profile }) => profile.seoTags,
    title: ({ profile }) => profile.name,
    component: ({ data: { profile } }) => (
    /* code */
    ),
    });
    

    View Slide

42. import createPage from '~/utils/createPage';
    import ProfileLayout from '~/layouts/Profile';
    import { ProfileShowPage } from '~/graphql/types';
    import QUERY from './Query';
    export default createPage({
    query: QUERY,
    queryVariables: ({ slug }) => ({ slug }),
    requireLogin: true,
    requirePermissions: ({ profile }) => profile.canManage,
    requireFeature: 'feature_flag',
    tags: ({ profile }) => profile.seoTags,
    title: ({ profile }) => profile.name,
    component: ({ data: { profile } }) => (
    /* code */
    ),
    });
    

    View Slide

43. import createPage from '~/utils/createPage';
    import ProfileLayout from '~/layouts/Profile';
    import { ProfileShowPage } from '~/graphql/types';
    import QUERY from './Query';
    export default createPage({
    query: QUERY,
    queryVariables: ({ slug }) => ({ slug }),
    requireLogin: true,
    requirePermissions: ({ profile }) => profile.canManage,
    requireFeature: 'feature_flag',
    tags: ({ profile }) => profile.seoTags,
    title: ({ profile }) => profile.name,
    component: ({ data: { profile } }) => (
    /* code */
    ),
    });
    

    View Slide

44. View Slide

45. https://github.com/zeit/next.js/tree/canary/examples
    Examples
    

    View Slide

46. Recap
    

    View Slide

47. Next.js is awesome
    

    View Slide

48. Rado approves
    

    View Slide

49. View Slide

50. View Slide

51. https://speakerdeck.com/rstankov
    Thanks
    

    View Slide

52. View Slide