React to NextJS Step by Step guide

https://selleo.com/blog/why-and-how-to-migrate-a-react-application-to-next-js

client-side routing is optimized with prefetching

1. Create a Next app

2. recreate your routes

        create your route structure using folders and file names inside `pages` directory

       ( you can use dynamic routes ) 

3.  move your components to the new project

        the suggested way is to put them in components folder in the main directory

4. plug in your styles

        import your main stylesheet in `_app.js`

        (version of Next.js > 9.3 have built-in support for SASS/SCSS)

5. take advantage of static / SSR pages

    move all of your data fetching to one of the functions: getStaticProps, getServerSideProps

        -> getStaticProps : should be used on those routes that you want to be rendered at build time and served as static. If you want to use it on a dynamic route you should also use getStaticPaths.

        -> getServerSideProps : is to be used on those routes that you want to generate on the server.

assets: see next article

data fetching logic is the different of these two project type

Libraries that need access to the window

conditionally load the library after the component was mounted (useEffect or componentDidMout)

你可能感兴趣的:(React to NextJS Step by Step guide)