Dantesque React

1. Deploying and running the applications If you want to execute the application in a Node.js server, as far as I know, follow theses steps:  1. Execute npm run build , and verify there is no errors. 2. Try to execute the application in the 2 ways:     2.1 Development mode: npm run dev  and     2.2 Production mode:  npm run start    Verify that the application runs OK in both cases! 3. You must copy all the contents of the project folder (in my case my-app10) to another folder in the server , then, execute  npm run start and verify that   the application works. But it runs HTTP! If you want to change the port of the server, change the " start " parameter in the package.json file as follows: "start": "next start -p $PORT " where $PORT is the desired port (for instance 3001, 8080 ..) 2. Alternatively running HTTP. Using server.js After you have copied the development folder to the server, follow these steps: 1. Create the file   server.js  in the my-app10

 1. Create an API Route Source:  https://nextjs.org/learn/basics/api-routes/creating-api-routes The files must be in the pages/api folder. In this example ( pages/api/hello.ts ), that can be accessed by http://localhost:3000/api/hello and will return  {"text":"Hello"} export default function handler ( req , res ) { res . status ( 200 ) . json ( { text : ' Hello ' } ) ; } Note: Don't fetch an api route from getStaticprops or getStaticPaths You can save to a DB some info from a form: export default function handler ( req , res ) { const email = req . body . email ; // Then save email to your database, etc... }

1. Dynamic page Source:  https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticpaths Source:  https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops 1. Create a page at /pages/posts/[id].js where the brackets "[]" means a dynamic page 2. This file must contain: A React component to render this page getStaticPaths  async function that returns an array of possible values of id. And has the fallback property. This function is called at build time and needs to be exported ( export async function getStaticPaths() ) getStaticProps  async which fetches necessary data for the post with the id; and needs to be exported too ( export async function  getStaticProps ()  ) The fallback property of the  getStaticPaths  means: If fallback is false , then any paths not returned by getStaticPaths will result in a 404 page . If fallback is true , it will serve the paths generated at build time. If it was not generated at build time, Next.js will serve a "

 1. Fetching data at the beginning of the application In the index.tsx (index.ts) you can use one of these 2 asyncfunctions: getStaticProps()  which works in client-side pre-rendering and the content is reused. So only one call is made, and it is made at build time . This is quicker. getServerSideProps()  that works on the server-side rendering and every call can produce different results as data changes. Use only if you need to render a page whose data must be fetched at request time such as authorization. //export async function getStaticProps() { / / only on pre-rendering export async function getServerSideProps ( ) { // only on server side rendering const allPostsData = getSortedPostsData ( ) ; return { props : { allPostsData , } , } ; } export default function Home ( { allPostsData } : { allPostsData : PostData [ ] } ) { return ( < Layout home > . . . . . . . Do not use API route inside getServerSideProps , inste

 1. Introduction. (No Next.js) Basic example. Load React, React-Dom, and Bable from unpkg.com !-- index . html --> < html > < body > < div id = "app" > </ div > <!-- React--> < script src = "https://unpkg.com/react@17/umd/react.development.js" > </ script > <!-- React-DOM --> < script src = "https://unpkg.com/react-dom@17/umd/react-dom.development.js" > </ script > <!-- Babel Script --> < script src = "https://unpkg.com/@babel/standalone/babel.min.js" > </ script > <!--script type="text/javascript"--> < script type = "text/jsx" > const app = document . getElementById ( ' app ' ) ; ReactDOM . render ( < h1 > Develop . Preview . Ship . < / h1 > , app ) ; </ script > </ body > </ html > Three dependencies are enclo

 1. Choose Theme   Crtl-K Crtl-T