basir / next-amazona Goto Github PK
View Code? Open in Web Editor NEWHome Page: next-amazona.vercel.app
Home Page: next-amazona.vercel.app
We get a glimpse of the UI with client side route protection, but with validation in server side and checking if the user is authenticated it will only render page which unauthenticated people will see if they are not authenticated, getServerSideProps can block all the operations till the render is complete, therefore this will not have any flashes of authenticated UI,
use case:
prime benifits:
with only client side route protection the pre-rendering will give a glimpse of the prime UI
with server side authentication it is guaranteed to show the un authenticated UI
product [slug].js I keep getting find no defined when I tried this out, could it be that I'm using an updated next version...
How to fix this probleam
.next\static\chunks\pages\index.js (220:268) @ Object.
218 | * ignore
219 | */
220 | e.noop=function(){},e.errorToPOJO=function(t){if(!(t instanceof Error))throw new Error("
error
must beinstanceof Error
.");var e,r={},o=n(Object.getOwnPropertyNames(t));try{for(o.s();!(e=o.n()).done;){var i=e.value;r[i]=t[i]}}catch(t){o.e(t)}finally{o.f()}return r},e.nodeMajorVersion=parseInt(t.versions.node.split(".")[0],10)}).call(this,r(10))},function(t,e,r){"use strict";(function(t){
| ^
221 | /*!
222 | * The buffer module from node.js, for the browser.
`import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
//import { Link } from 'react-router-dom';
import HomeScreen from './Screens/HomeScreen';
import ProductScreen from './Screens/ProductScreen';
function App() {
return (
export default App;
`
this is an updated Router function that is working with the old coDE IS NOT working.
I'm having another issue.
When i increase the item quantity in the cart
page, for the first product, it adds a "0" in front of the value (for instance, when i select quantity of "5", it adds "05") then when increase it on the second product, it appends the quantity value instead of increasing it.
Here's a screenshot with the code and UI.
*pls note that im not using material UI theme. I'm using simple HTML select
The subtotal result is right though (this the sum for 9 products) but it shows 054items
! (the 05
from the first product and the 4
from the second)
I got this error when using styled component and the css styles of the navbar has been broken:
next-dev.js?3515:32 Warning: Prop className
did not match. Server: "MuiTypography-root MuiTypography-body1 makeStyles-brand-98 css-ahj2mt-MuiTypography-root" Client: "MuiTypography-root MuiTypography-body1 makeStyles-brand-2 css-ahj2mt-MuiTypography-root"
Server Error
Error: Error serializing .topRatedProducts[0].user
returned from getServerSideProps
in "/".
Reason: object
("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.
looking on the demo website at the browser: view source ctrl+u or
view-source:https://next-amazona.vercel.app/
you can see that build did not minify the material UI CSS.
how can we fix that?
regards.
hello mr.bassir please helpme to finish your course without any error, before i followed your part 14 tutorial my code run well connect and can read data.js with mongoDB but when i followed your code on part 14 im stuck getting error
here the output
`import mongoose from "mongoose";
const connection = {};
async function connect() {
if (connection.isConnected) {
console.log("already connected");
return;
}
if (mongoose.connections.length > 0) {
connection.isConnected = mongoose.connections[0].readyState;
if (connection.isConnected === 1) {
console.log("use previous connection");
return;
}
await mongoose.disconnect();
}
//delete useCreateIndex, useNewUrlParser, useUnifiedTopology because mongoose 6.00 not used anymore
const db = await mongoose.connect(process.env.MONGODB_URI, {});
console.log("new connection");
connection.isConnected = db.connections[0].readyState;
}
async function disconnect() {
if (connection.isConnected) {
if (process.env.NODE_ENV === "production") {
await mongoose.disconnect();
connection.isConnected = false;
} else {
console.log("not disconnected");
}
}
}
function convertDocToObj(doc) {
doc._id = doc._id.toString();
doc.createdAt = doc.createdAt.toString();
doc.updatedAt = doc.updatedAt.toString();
return doc;
}
const db = { connect, disconnect, convertDocToObj };
export default db;`
Demo website at https://nextjs-amazona-final.vercel.app/ is response with a 404 not found
request failed with status code 500
how to correct it when during SignIn on account backend run i seed the products and user everything properly but then after this problem occurs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.