There are several reasons for the use or not of both buttons, many of them explained in different web pages easy to find with a simple Google Search ( https://crocoblock.com/blog/pagination-vs-infinite-scroll/ ). I describe the reasons that seem most obvious to me from a practical point of view. The interface design previously defined by desktop use is currently totally influenced by use on mobile devices. In fact, many decisions are made from the user experience on smart phones and then adapted to the desktop version. If moving from one project to the next involves a screen change, the back button conflicts with the browser button itself, making it totally unnecessary because it's redundant and because it takes up space on a small screen: If the change of projects is inside a carrousel, the Next or Back buttons are replaced by the slide forward > and backward < buttons. As for the next button, the controversy is whether it is necessary, or is an infinite scrolling preferable as explained in https://ux.stackexchange.com/q/21375/115107 . All this depends on how the portfolio design is planned and depending on the number of projects to be shown. Returning to the topic of device use, the user is more familiar with finger scrolling to view all content prior to clicking a forward or back button at the bottom of the screen. If the content is long, the navigation buttons may not be seen If the navigation buttons are floating they can cover part of the content, being a portfolio it's inconvenient In some portfolios it's better to show all the projects is a contact sheet so the user clicks on the one they want to see in detail, usually shown in a modal window. If the projects are subdivided by subject, there may be a submenu for immediate accessibility. There are many examples, visit https://www.handsomefrank.com/ which is a wide gallery of illustrators.

In Mac OS there's a similar function to preview various elements from the finder called QuickLook ( https://en.wikipedia.org/wiki/Quick_Look ). After selecting the items, pressing the spacebar key displays a preview window with a button bar at the top with various actions such as see next and previous which shows the preview from one item to another without needing to close the window. Images from https://www.dummies.com/computers/macs/mac-operating-systems/how-to-use-quick-look-on-macos-mojave/

Well, after a good night's sleep waking up from 30 in 30 minutes with the same question in mind, I decided to return use the firebase callback just to treat the data and I did the part of rescuing the images out of this callback. The beginning solves the problem of returning the props before the promises are resolved, but I still do not know what the reason for async/await not having worked as I would like. From what I understand, the block await realtime.ref().onde('value', async snapshot => {...} ) does not expect all promises to resolve and the code continues to run on the line immediately after that block, that is, in return {props}.Although I do not understand what happened, this was my solution to the problem:// após o calback da função once do firebase, quero que todas as url estaticas do google sejam tranformadas em urls do dominio firebasestorage.googleapis.com try { // Pega url atual da imagem no Firestore e armazena no mesmo local que antes tinha apenas uma url estatica do google, "gs://..." console.log( 'Veio até aqui' ) const vetPromise = await criarArrayDePromisesDasImagens( produtos ) produtos = await Promise.all( vetPromise ).then( ( values ) =&gt; { // resolve todas as promisses e então coloca o resultado das imagens no produto const result = porAsImagensNosProdutos( values, produtos ) console.log( 'Imagens resgatadas, promise sucess' ) return result } ) console.log( 'produtos promise all =&gt;', JSON.stringify( produtos, null, 4 ) ) } catch ( error ) { global.console.log( 'erro ao capturar promises => ', error ) }

I was able to figure out the problem. I upgraded the version of the 'remark' dependency from 14.0.0 to 13.0.0 and the problem was solved. Below the final package.json file in case someone has this problem. { "name": "learn-starter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" ) "dependencies": { "date-fns": "^2.23.0", "gray-matter": "^4.0.3", "next": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", "remark": "^13.0.0","remark-html": "^13.0.1", "unified": "^10.1.0" ) )

It is complaining of comma point in a CSS file, within its scss has some pointless and comma lines, tries to add and see in what it gives.If you delete the scss files from within the components folder it will give build normally, then the problem is in one of these 4 files.

Hello, you will probably need to add this rule to your .eslintrc.jsonrules: { 'react/jsx-filename-extension': [2, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }], }, I will leave some referral links to help https://stackoverflow.com/questions/55614983/jsx-not-allowed-in-files-with-extension-tsxeslintreact-jsx-filename-extensio https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md https://github.com/vczb/boilerplate

I'll try to explain over one Functional Component.The first thing you should do is create a state for your application, let's say it's just a text.First you should import the useState:import { useState } from 'react' Then you will install in your application:const [ existsCPF, setExistsCPF ] = useState() It is the variable existsCPF that you will use to display in your application. Just insert it using { existsCPF } that it will appear in the application (in case, the useState() is empty, so for now nothing appears).Then, when you make the request in the API, you will change the type value like this:setExistsCPF('CPF JA CADASTRADO') React will already worry about updating the component and will display for you.

You really can't have two module.exports, since each CommonJS module can have only one entry point (denoted by) exports).Generally the configuration plugins Next. js accepts the nesting of functions and settings. For example:// Configurações do plugin // ↓↓ const removeImports = require('next-remove-imports')({}); // Configurações do Next.js // ↓ module.exports = removeImports({ images: { domains: [ 'localhost', '10.0.0.164', 'exemplo.com', 'exemplo.com.br' ] } }); Notice the module next-remove-imports export a function that accepts, as a single argument, an object with the settings for the plugin. This function returns another function that in turn accepts Next.js settings.This behavior can be done for several plugins, so that the settings are being "ignied" for each of them.See that this is demonstrated in https://www.npmjs.com/package/next-remove-imports the plugin in question.

You can try to create an object Image to check if it is possible to load the image.The idea is that you create the object and use the methods onload() and onerror() to check whether it was possible or not to upload the image, if it was possible, you update it state BlogBanner, otherwise maintain the default image (or apply some other suitable treatment for your application).Your code could be something similar to this:if (props.blog.image) { // Pegando a URL para imagem const url = `${hlp.BACKEND_HOST}/images/blogBanners/${props.blog.image}`; // Criando um objeto Image var img = new Image(); img.src = url; // Se foi possível carregar a imagem img.onload = () => { console.log("Essa imagem ainda existe no seu servidor"); setBlogBanner(url); }; // Caso não seja possível img.onerror = () => { console.log("A imagem não existe mais, continuar com a img padrão"); }; };

In this scenario the best solution is by using the context, within your context you will create a state that will store the result of your request and on the next page you will only need to access that state. https://pt-br.reactjs.org/docs/context.html

To manage, a very simple and basic mistake. When I opened the app with Visual Studio Code, for some reason it changed the "F" of the /Frontend path to "f" tiny. Well, in all projects here I realized that VS Code is doing this and yet other apps from other technologies don't make a mistake, so it was really simple it was so hard to think about this problem.And to solve I just did: In the terminal VS Code exit the folder (cd..) and entered again by placing the correct path (cd Frontend). Just that solved a problem that was giving huge headache... now I just need to know why the VS Code is changing the path for tiny.

The error is in your package.json, the script dev is like:{ "dev": "next" } When it should be:{ "dev": "next dev" }

This is the syntax of a https://nextjs.org/blog/styling-next-with-styled-jsx of NextJS, this is called Styled JSX, and the fact of using <style jsx> is not to be confused with the tag itself <style> HTML.What’s special about it is that it encapsulates and maintains the style scope in its component without affecting other components, which allows you to change/delete/create style codes without worrying about side effects.<style jsx> is the tag that indicates the beginning of scope and stylization. Example:// pages/index.js function Home() { return ( <div className="container"> <h1>Hello Next.js</h1> <p>Let's explore different ways to style Next.js apps</p> <style jsx>{` .container { margin: 50px; } p { color: blue; } `}</style> </div> ) } export default Home The above style code applies only to the component Home(), that is, only the <p> and div class container will be affected by the stylization rules and even if other components have this element <p> or class container, they will not be affected.You can create global styles with this tag, just pass the attribute global:// pages/index.js function Home() { return ( <div className="container"> <h1>Hello Next.js</h1> <p>Let's explore different ways to style Next.js apps</p> <style jsx global>{ .container { margin: 50px; } p { color: blue; } }</style> </div> ) } export default Home This applies stylizations for all elements p or class container on this page.

Error: There are multiple modules with names that only differ in casingThis problem usually occurs in windows, when you are with the terminal pointing to the file and some part of the path differs from the original to the file exactly, including between capital and lowercase letters. To solve this is quite simple:Just reopen your VSCode (if it was through the code .) again passing exactly the path of the file, taking very well the name of each folder to get to the project. Each letter is capital or lowercase needs to be equal, the whole way to the project.In other situations/erres that not only the opening of the project in VSCode, the solution is also valid.You can also open by the CMD directly, which apparently does not occur the error.(edited)It worked for me, maybe it's the same problem.

import React, { useState, useEffect } from 'react' import Data from 'data.json' interface Tarefa { materia: string, local: string, descricao: string, data: string } interface TarefaProps { tarefa: Tarefa[] } const TarefaExample: React.FC<TarefaProps> = () => { const [data, setData] = useState<Tarefa[]>() useEffect(() => { setData(Data) }, []) return ( <> {data?.map((n) => { return ( //Renderize sua tela ) })} </> ) } Remember the studies with typescript that you have to make the statements and point in your component/class which interface it should follow.Use the state to set the initial status of the application.Use Effect to change your data before the application starts.If necessary, add a loading in your application.

I, particularly, would not use getServerSideProps for this purpose. You see, this function is intended to make Server Side Rendering (SSR), i.e. when you need to process something on the server before rendering the page (e.g., grab data in the database). You can use other react strategies to load this information when the component is mounted. An output would be to use Hook useEffectimport {useEffect} from 'react' const MeuApp = () =>{ useEffect(()=>{ //AQUI VC CAPTURA OS COCKIES },[]}) } UseEffect runs every time the component is mounted and together with useState, you can store the data to be used in the remainder of the code.

Opa, there are libs that can assist you with this, but you can also create a console wrapper. log to assist you, the idea is to check the environment being run and run or not the console. log.A small example.const log = { info: (msg) => { if(ENV==="PROD") return; console.log(msg) } } Here the variable ENV is an environment variable that informs the environment in which it is being executed (production, development, stage, location), if production nothing is executed.[obs] Check what can be impacted when not running the console. log.Use:log.info("Executando operação XYZ"); I hope I helped.

About Line 19:According to the documentation of socket.io-client you should import the io as follows: import { io } from "socket.io-client";In his was missing {The errors of lines 20 and 21 are talking that you are trying to assign a string array in a variable string.Confer if name, room are, in fact, the string type. (play on console.log ) If they are even arrays, you can do this: setRoom(room.join(""))

Beginner's mistake. I went up the "out" folder and she was changing the path where the next puts the css. Upstreaming its content directly on the server works.

You must use the name convention PascalCase to name "own" components (created by you, the programmer).When this convention is not properly followed, the TypeScript compiler understands that you are referring to a Tag of HTML, which is obviously not the case. Like Tag HTML joinOuterContainer does not exist, a mistake is raised.When the convention is used PascalCase, the compiler searches for the component in the scope of the code running.Therefore change the name of your component joinOuterContainer For JoinOuterContainer.