Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Next.js

Intro to Next.js

Radoslav Stankov

February 24, 2020
Tweet

More Decks by Radoslav Stankov

Other Decks in Programming

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