Build and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS

use this for scroll top automatic
router.push(newPathname, { scroll: false })

In server side rendering part searchParams is not working and its value is always undefined why it is so.

Hello, I keep seeing this error when passing { newSearchParams } to Home at server-side rendering why is that ?

What is this extension that tells you what code you are going to write next?

router.push(newPathName, {scroll: false}) Disable scroll to top

That's the best javascript project that I've everseen

I get a trouble that i can't run custom filter properly

Please upload more type script tutorials videos sir.

For some reason when i start up my project and my search is only localhost:3000 then no cars gets shown on the website. it says Oops, no result. But when I switch the search to something specific like BMW m8 then it shows all the m8 cars. Do anyone know what the problem could be?

yes typescript!

We intrested in TypeScript

wen channel rebrranding to () => TypeScript Master? :3

TS > JS

Thankyou Adrian this project is so knowledgabale. I cannot thankyou enough man.

best tutorial ever! It just 3 hours, but I finished all in three days. Many thanks Adrian!

anyone having issues with tailwind styles being applied? I notice that the custom @apply classnames are working but not the tailwind classes I'm adding directly into the className of the component (e.g. making the button blue on minute 25 isn't working but adding those same styles into globals.css into a class with apply is working) EDIT: I use a src folder so I had to amend the tailwind config file

I'm getting below error
./app/globals.css:20:3
Syntax error: /Users/madhu/Desktop/works/carsshowcase/app/globals.css The `sm:` class does not exist. If `sm:` is a custom class, make sure it is defined within a `@layer` directive.

18 |
19 | .padding-x {
> 20 | @apply sm: px-16 px-6;
| ^
21 | }
22 |

We want more Typescript projects! This is why I didn't attend the course that you have done for Next.Js

wonderful video thanks a lot, for the issue of scrolling to the top you can keep it server side rendering and add to the router.push a property of { scroll: false } which is gonna look smg like that : router.push(newPathname, { scroll: false }); that would solve it without needing to move back to the client side rendering enjoy guys

You are a God my man.... You have taught me REACT.....today I am earning through React....I respect you my LORD

nice

More TypeScript videos

I like typescript.

Typescript is great

for scrolling problem by router.push or Link from next you can use {scroll:false} as second parameter on these.

nice!

if u r student u can not buy and learn this project without money as all image are paid

Damn, my tailwind.confing file is "ts", not "js". How do I solve that?

Next.js is great, we use it at work for all our React-based projects and it saves so much time and effort, lets us work quite efficently.
The only thing I find disturbing as of late is that a lot of tutorials teach with Tailwind, which isn't as commonly used in the business. Luckily a dev who has at least some work experience is able to substitute with his preferred framework instead.

Hi Adrian, thanks so much for this. Please what extension do you use for your autocomplete

five minutes in and your still talking about YOU. I am gone.

These watermarks look so much better... f ck

It would be good to have a course about how to design APIs like a pro with authentication, permissions, etc

Wait 6 month then try to update packages xDDDD

its not possible to register for a free trial account anymore on the imagin website, has anybody successfully registered on there in the past few days??

Dude uses autocompletion to create components but really manually imports "useState" lmao

realy thanks alot

Hi! Why you did not select ESLint on initialising next.js app?

Amazing content. (Next + Tailwind + TypeScript) = I'm here from the first to the last minute.

where is next/image ... i do not have that file

How I love this "copy this, download this" type of bullshit... Yes, of course, who the fuck needs styling anyway

i am getting this error while creating car specs in rapid api
(Error: Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function)

i am getting Error: Passing props on "Fragment"!

The current component <Transition.Child /> is rendering a "Fragment".
However we need to passthrough the following props:
- ref (This error on SearchManufacturer.tsx file) below is the code kindly let me know what is wrong i have tried everything.

"use client";
import Image from "next/image";
import { Combobox, Transition } from "@headlessui/react";
import { SearchManufacturerProps } from '@/types'
import { Fragment, useState } from 'react'
import {manufacturers} from '@/constants';

const SearchManufacturer = ({manufacturer, setManufacturer}: SearchManufacturerProps) => {
const [query, setQuery] = useState("");
const filteredManufacturers =
query === ""
? manufacturers
: manufacturers.filter((item) => (
item.toLowerCase()
.replace(/\s+/g, "")
.includes(query.toLowerCase().replace(/\s+/g, "")
)))

return (

<div className='search-manufacturer'>
<Combobox value={manufacturer} onChange={setManufacturer}>
<div className='relative w-full'>
{/* Button for the combobox. Click on the icon to see the complete dropdown */}
<Combobox.Button className='absolute top-[14px]'>
<Image
src='/car-logo.svg'
width={20}
height={20}
className='ml-4'
alt='car logo'
/>
</Combobox.Button>

{/* Input field for searching */}
<Combobox.Input
className='search-manufacturer__input'
placeholder='Volkswagen'
displayValue={(manufacturer: string) => manufacturer}
onChange={(e) => setQuery(e.target.value)} // Update the search query when the input changes

/>

{/* Transition for displaying the options */}
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom='opacity-100'
leaveTo='opacity-0'
afterLeave={() => setQuery("")} // Reset the search query after the transition completes
>
<Combobox.Options>
{filteredManufacturers.length === 0 && query !== "" ? (
<Combobox.Option
value={query}
className='search-manufacturer__option'
>
Create "{query}"
</Combobox.Option>
) : (
filteredManufacturers.map((item) => (
<Combobox.Option
key={item}
className={({ active }) =>
`relative search-manufacturer__option ${
active ? "bg-primary-blue text-white" : "text-gray-900"
}`
}
value={item}
>
</Combobox.Option>
)
))}
</Combobox.Options>.
</Transition>
</div>
</Combobox>
</div>

)
}

export default SearchManufacturer

Hi, this is really helpful and good explanation, may I know what did you use for the autocomplete code/script from you video ? did you use Github autopilot x or something?

is the api key working now?

so much errors...

No thank you.

what about the Sign In page ????.....