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)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容