Discussion on: Creating an animated navbar inspired by Vercel using React (Next.js v13), Framer-Motion, and Tailwind CSS

[GreggHume]

I am going to leave some friendly comments for writing updates that i think could really make a difference to the readers :)

[GreggHume]

Let's break down the code. The first thing you need to do is import your Navbar component in your layout import NavBar from "@/components/navbar";. The "@" here is an import alias you can set while scaffolding your app.

I dont think you need to explain imports to developers, i think developers working with next should know imports and aliases. Unless you have experienced developers wanting to know this?

[ashish]

actually import aliases are kinda newly added to next.js, wasn't sure if everyone would know this

[GreggHume]

Is 3 years ago newish though? Aliases have been around since around 2016.
nextjs.org/blog/next-9-4

[ashish]

the option to change/add import alias through the cli itself was added recently, my bad

[GreggHume]

Its nice to show the folder and file structure up front and tell readers what folders and files to create:

Create the layout and navbar components like so:

├── app
    ├── layout.tsx
    ├── globals.css
    ├── components
        ├── Navbar.tsx

[ashish]

noted !

[GreggHume]

I find it easier to read articles if some of the code snippets are grouped rather than split up. Seeing as a user must run all of these in sequence its nice to see them together.

# create next app
pnpm create next-app@latest

# install framer
pnpm i framer-motion

# run dev server
pnpm dev

[GreggHume]

It would be nice if you put a gif or the video of how this works first so we can see what this is about so we can decide if we want to read further - rather than having the video at the end :)

[ashish]

makes sense, adding the video to top as well :)

[ashish]

thanks for all the suggestions, this is why i love the dev community <3