next.js

I can’t reference an image in Next.js

by

From Next.js v11 onwards, you can do what you were doing without any additional config: import macbookIphone from ‘../../assets/images/mac-iphone.jpg’; <Image src={macbookIphone} /> // or <img src={macbookIphone.src} /> Ref: next/image For earlier versions if you wish to import images instead of putting them in public directory, then you can configure file-loader or url-loader.

getting error “TypeError: Cannot read properties of null (reading ‘useState’)” on useState usage react

by

If you are using Next 13 App router this could be happening if you are using an async function Wrong: “use client” export default async function Page() { const [variable, setVariable] = useState(); } Right: “use client” export default function Page() { //Remove Async Keyword const [variable, setVariable] = useState(); }

Next.js API is back-end?

by

Yes. Next.js is a pre-rendered React app in the client-side that users can view and interact with and can be considered as front-end. At the same time, it also does server-side rendering and API routes which can perform server-side code and access data in the database and can be considered as back-end.

How to detect the device on React SSR App with Next.js?

by

LATEST UPDATE: So if you don’t mind doing it client side you can use the dynamic importing as suggested by a few people below. This will be for use cases where you use static page generation. i created a component which passes all the react-device-detect exports as props (it would be wise to filter out … Read more

How to deploy NextJS with NGINX?

by

Check this: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153 Reference for HTTP/HTTPS: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153 Start PM2 nextJS service on port 8080: cd PROJECT_DIRECTORY pm2 start “npm run start — -p 8080” –name contractverifier Configure Nginx: Replace this file with the below code /etc/nginx/sites-available/default server { server_name www.DOMAINNAME.com DOMAINNAME.com; index index.html index.htm; root /home/ubuntu/PROJECT_FOLDER; #Make sure your using the full path # Serve … Read more

Next.js Loads tags but it doesn’t execute them

by

This works to me: Create a folder for your static files: <root>/public/static/script.js in your index.js at <root>/pages/index.js import Head from ‘next/head’; import MyAwesomeComponent from ‘../components/mycomponent’; export default () => ( <div> <Head> <script type=”text/javascript” src=”/static/script.js”></script> </Head> <MyAwesomeComponent /> </div> ) Note that static is the name I used in this example, it’s not a requirement, … Read more

Next.JS Image `layout=’fill’` is broken

by

The wrapping div should have position: relative: export default function Home() { return ( <div> <div style={{width: ‘100px’, height: ‘100px’, position: ‘relative’}}> <Image src={“/i.png”} layout=”fill”/> </div> </div> ) } This is a consequence of how position: absolute works. It’s containing block will be the nearest ancestor element that has any position value but static (the … Read more

How to get query params using Server component (next 13)

by

I don’t think it’s currently possible to do this in an arbitrary component. However, it is possible to access query parameters in page.tsx files, and pass these down to your components via props. export default function Page({ params, searchParams, }: { params: { slug: string }; searchParams?: { [key: string]: string | string[] | undefined … Read more