next.js VS create-react-app

While it's technically possible to do things like compile React entirely out of an exported NextJS site, it's far from trivial and doesn't fit most usage very well. It's certainly a harder mental model at the very least.

Disable all your chrome extensions. As recommended here https://github.com/zeit/next.js/issues/10246

Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js

import React, { Component, Fragment } from 'react';import { withRouter } from 'next/router';import 'isomorphic-unfetch';class post extends Component { static async getInitialProps({ req }) { try { const res = await fetch(`http://localhost/api/posts/${req.params.postslug}`, { method: 'GET', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, cors, *same-origin }); const json = await res.json(); return { data: json.data }; } catch (err) { console.log('err'); } } render() { const { data } = this.props; return ( ); }}export default withRouter(post); I have already checked the next.js docs and it has this implementation which uses the node http module. I implemented this code on express by copying some parts from the documentation example. However it still seems to cause a page reload when i go to the article page using a .

next.js

NextJS: 8.0.3

Read more one the github issue

import React from 'react';import PropTypes from 'prop-types';class VerticalSlider extends React.Component { constructor(props) { super(props); this.ScrollMagic = null; this.controller = null; this.scenes = []; this.container = React.createRef(); } componentDidMount() { if (this.container.current) { // Why "require" here? // https://github.com/zeit/next.js/issues/219#issuecomment-393939863 // We can't render the component server-side, but we will still render // the HTML // eslint-disable-next-line global-require this.ScrollMagic = require('scrollmagic'); this.initScroller(); } } componentWillUnmount() { this.scenes.forEach(scene => { scene.destroy(); }); this.controller.destroy(); this.scenes = []; this.controller = null; } initScroller() { try { this.controller = new this.ScrollMagic.Controller(); if (this.container.current !== null && this.container.current.children) { [...this.container.current.children].forEach(children => { const scene = new this.ScrollMagic.Scene({ triggerElement: children, duration: window.innerHeight * 1.5, triggerHook: 0, reverse: true }); scene.setPin(children); this.scenes.push(scene); }); this.controller.addScene(this.scenes); } } catch (e) { console.log(e); } } render() { return (

Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development.

Immerse yourself in the official Create React App documentation for a deeper understanding.

Create React App (https://create-react-app.dev/)

- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.

I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.

What's the connection?

Also, take a look at this response from 2021: https://github.com/facebook/create-react-app/discussions/117...

Create React App Documentation

Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-appand for more details on how create-react-app works and other staff, please visit the official website: https://create-react-app.dev/

Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.