viewSource

​

Our Next Topic: Next.JS
---

Brian Coords: Aurooba, we are back with a brand new series covering a big, hot, hot topic in WordPress development, web development, all that sort of stuff. It's called Next.js and from what I understand, you're like neck deep in Next.js right now. Is that true?

Aurooba Ahmed: Neck deep. I think my whole body's in it. Full deep. Like, all the way. Oh my goodness.

Brian Coords: So you, so you, are you a Next.js guru at this point? Like, can you answer all my Next.js questions?

Aurooba Ahmed: No, probably not, but I can definitely, I have spent so much time thinking about it. And considering it from a lot of different angles recently that I feel like I have a lot of capital O opinions about it that I wanna, that I want us to get into.

Brian Coords: Okay. And for context, we actually did work on a Next.JS project together and like, I think I spent most of my time more just like doing components and a bit more of the front end and you like, were basically back there like taming the routing nightmare monster and dealing with all that stuff. So like I have some Next.JS context and I, you know, have used it a couple times now, but.

What exactly is Next.JS?
---

Brian Coords: You, I would love it if you could explain it to me as if I like, didn't know, like what, like literally what is Next.JS? Like what, why does it exist? What is, what is it supposed to be for?

Aurooba Ahmed: Ah, so Next.js is like such a beast, and you know, the project that you and I worked on, one of the biggest things I remember, the takeaways from it was, Oh my god, why was that so hard?

Brian Coords: Yeah.

Aurooba Ahmed: You know, it was, it was, it was my first real Next.js project that was so complicated. You know, before that I'd just done smaller things with it, and hobby things, and it is such a different mindset

shift from how we approach like WordPress or a Laravel project that if you don't approach it correctly You're gonna end up with so many setbacks. You end up like having to turn around and do this again and turn around and do that again constantly that you know, it becomes really frustrating. And that project was frustrating for us.

We learned so much, but it was also frustrating and I would say that is a that is the thing with like All JavaScript frameworks right now, you know, they're so in vogue. Next.js is one of them. And they are trying to do everything. Right? Like these frameworks, like Next.js, they want to do the front end, the back end, the middle, everything.

Brian Coords: Yeah, I think I struggled the most with it because it's such a mindset shift to go from HTML, CSS, and PHP, where things happen in the way that you tell it to happen. And everything is like, here's 10 lines of code, start at one and go down to 10 and do these things and render my HTML exactly like this.

But once you jump into React, which is like, right, like the, I guess the foundation of Next.js, it's. Things happen here, there, everywhere. Things are coming in, things are ignoring you, things are in a side of an escape hatch, there's the- It's like Suddenly you're just like floating in three dimensions when everything was like in two dimensions before.

And it was like, you know, you went from like forward or backwards to now like you never know where anything is. That was the feeling I had. It was a feeling of drowning basically. Like,

Aurooba Ahmed: I think that that is so accurate and such a good picture of how it feels when you first get into it. Right? So Next.js is a React framework. Like you just said, it's built on top of React and it abstracts out, you know, The, how you interact with React, other parts of JavaScript, and includes a lot of other complex things that you need when you're building a full stack application. Because the idea of Next.

js is the ability to do the front end and the back end in one code base, in one architecture, writing it all in one language. JavaScript. Whereas typically, you know, in a, you might not always do that. You might write a backend in Laravel and then do the front end and just HTML CSS with maybe a PHP temping language, or maybe in JavaScript, right?

But Next.JS is trying to do all of it all together. And the advantage of that from a surface level, I suppose, is that there's only one language for you to learn kind of. Kind of, because you still need HTML, you still need CSS, you still need to know all these things. But you don't have to learn a completely separate programming language just to be able to do the backend if you already know the frontend, right?

I think that's kind of like where this all sort of began. And the other thing is Next.js, you can use Next.js in a lot of different ways for sure, but one of the things that you can do with it is build single page applications. And I remember SPAs as they're called. Remember there was like a time when they were like just completely in vogue and everyone was just like, yeah, SBA this and SBA that and everything should be in SBA.

I mean, it was wild.

Brian Coords: It's the URL with, like, the, the hash, like, mark in it that makes me think it's like, all right, we're entering, like, Angular territory or something where the URL, like, has a hash in the middle, and then the rest of it, yeah, that's

Aurooba Ahmed: Yeah,

Brian Coords: all lived through that.

Aurooba Ahmed: 100%. And you know, like you were saying, you feel like you're floating and drowning, because in a single page application, and a lot of JavaScript frameworks are like that, the idea is that you're not sending a request to a server, and then getting back a full page. Instead, what happens is you send a request to a server, and it sends back the most minimal HTML you need, and some links to some JavaScript files.

And then your browser will go and then download things from those different JavaScript files, and hydrate or populate that HTML with the actual contents of that page. And it all happens asynchronously. And you know, I remember, like, it was not that long ago where I was just like, I don't get it. If you put async on something and everything breaks and nothing is ever reliable.

And I don't understand why we're doing this. And this is so stupid. I remember being very mad at it all the time. But that is the foundations of Next.js. You know, this asynchronous nature.

What problems does Next.JS solve?
---

Brian Coords: So I feel like I've seen it a lot. You said like, don't have a backend, but I've also seen it a lot in the context of like headless WordPress. Headless WordPress, I feel like Next.JS tends to be sort of the go to method for doing a headless WordPress, but then WordPress is your backend in that situation, right?

So that's definitely, so then like. What, what problem did somebody have where they sat down and said, I need to create Next.JS? Like what was the problem just that they just wanted to write a lot more JavaScript or was there like some deeper problem? They're trying to solve with it.

Aurooba Ahmed: So. I think this all comes back, the crux of this conversation is actually not why someone would need Next.js, but actually, why would someone need a single page application? I think that's the, that's the question that helps you answer the Next.js one. And this is something I was talking to a friend about just earlier today, too.

And, you know, A single page application makes a lot of sense when you have a lot of reusable components that you're constantly using. Because in a single page application that, you know, Next.js lets you do, what happens is, You have a page and on that page, you have a header and a navigation and a footer and some content in the middle.

But on the next page, you also have the header and the navigation and the footer and maybe the content that's different, right? In a regular multi page application, and we're going to step away from the concept of caching for a second. You know, whenever you want to go to a second next page, the server is going to send you back.

All of it all again, but in a single page application, you're like, Oh, I already had the header and the navigation and the footer. I just, I'm just going to go grab the content. So you are not constantly sending more requests to the server. You use JavaScript to just grab the information, which is not a server request, technically, or it might be a server request sometimes, but it's a much smaller request than the whole page.

Right. The other times when a single page application is really helpful, think about something like, say, Netflix, right? Netflix has multiple API sort of that drive it or just any application where you need to grab information from multiple different places. That's when using a single page application architecture really, really helps.

And Next.js and JavaScript are just really, really good at dealing with different sources of information, helping you put it all together for in an asynchronous nature, and then presenting it to the user in the browser. So when you have a lot of APIs. It makes a lot of sense because you want one unifying place that it all comes into instead of having to deal with, Oh, this API requires this particular way to deal with it.

And this API requires this particular way to deal with it. Most, most all APIs can work with JavaScript, you know, because you're able to access them in just simple URL based nature and you don't always need an SDK that's special for it. And the third reason that you might need a single page application is.

Basically, when you're not really building a website, you know, like a website is by nature, a page based thing, but Asana isn't a page based thing. For example, you know, as a tool, it's a, it's a web app. Most of it is the same. You just want to populate with different types of information in slightly different configurations, depending on what you want to do.

So, Again, I guess it's really the same thing as the reusable components. When you have something that's being constantly reused, where you have a lot of APIs, An SPA makes sense. The grey ground is when you need all of that, but you also need some kind of website type architecture as well. that's what Next.

js solves.

Brian Coords: That was going to be my question. Cause I was thinking like Asana is a good example where it's an app. You open it, you go to an individual project, then you go to an individual set of tasks, then you go to an individual task and you keep drilling down. But like, you don't want to have a new page load every single time when you're just expanding each component and fetching a little bit more information and all that makes sense.

But when I get to that task, like I'm, I'm nested super deep. Then I want to share that to my coworker and I need a URL because it is its own page. Like I need the URL to point to what I just did in that single page app, even though I didn't load separate pages. And I feel like that's the place where it gets the hardest.

And like, that's like you said, like this, the old single page app days, like that was the hardest part was like keeping your URL scheme up to date with this stuff so that it all kind of works together. And from what I understand or what I've used Next.js, it sort of helps in that scenario where you, like you said, like you want individual webpages and URLs, but you also want a single page app experience.

Aurooba Ahmed: Yeah, so you can build a multi page application with Next.js. It has a page router, as it's called inside it, that allows you to create different pages. But, Like you said, you know, just because you're using a web app, a single plate application, doesn't mean you don't want a way to point to a particular state of the application, right?

And so, Next, something like Next.js is really good at making a URL, looking at the URL, and then recreating that state for you when you put that into the browser. The other time that it's really helpful is when, let's say, you know, Asana is an application. We'll stick with that example for a second. And they also have a marketing site.

What if you don't want to host a marketing site on a separate piece of architecture? You just want to keep it all in one. Well, in Next.js, you could have the web application in the same code base and a marketing site that maybe is, you know, static or connects to something like headless WordPress. And the front end is all in one code base.

So now you're able to do all those things using the same language. So everyone just needs to know the same kind of like. Have the same kind of expertise, have the same unifying language in order to develop and collaborate, whereas you, you know, it's really easy to fall into a situation where, oh, the, the application is built in one way and the marketing side is built in this other way.

And you need completely different skill sets in order to be handled in order to handle them. And I've talked with. I think you and I have actually been on project calls with people where that has been the case. And it can be a frustrating thing for companies when that happens, because what if the marketing team was out, you know, and now the product team needs to do something for them.

They don't know how to do it. They, it's a too much of a onboarding process, but if it's all in the one code base using the same kind of stuff, it's all good. Anyone can jump in, you know?

Setup and hosting for Next.js
---

Brian Coords: So I think I get it, but so then explain to me. All right. So I think we'll put headless WordPress aside, right? Because that is a specific type of way to use Next.JS. And it's like a sort of thing, and it definitely makes sense in those situations where, you know, you will just want your marketing team to be able to just like put content into a nice CMS and they don't actually like

affect the real website or, you know, and then we just pull it all through like the API. But let's say you're just starting from scratch new next.js project. Like, what is the steps to like, just start, like, how do you, like, how do you say like, all right, Next.JS, like, I can't just like go to, you know, BlueHost and like spin up a WordPress site.

Like, what did, like, where do you go first? Is it like, is there like a one company that like runs this all or like

Aurooba Ahmed: what a leading question, Brian. Well, Next.js is owned by Vercel, right? Yeah, so Vercel owns Next.js. I don't know if they always owned it, but they, they own it now. So they are like the driving company behind the development of Next.js. And they consider themselves to be the best possible architecture to run Next.

js on. But it is the kind of thing that you can basically run yeah. On any server that can run node, essentially, you

Brian Coords: Cause it's fully open source. Like Next.js is an open source framework anyone can use anywhere.

Aurooba Ahmed: Yeah. It's an open source. Anyone can use it. I believe the project that we did, we use it and we built it on top of Netlify as our platform, but you could just buy a DigitalOcean server, serve, like, Droplet, run, have Node on it, and then be able to run Next.js on it, because ultimately it compiles down to just basic JavaScript,

Brian Coords: Yeah.

Aurooba Ahmed: And you can do static generation or dynamic, but, you know, that's getting into the weeds a little bit. But you don't, it's in, it does have dependencies, but ultimately, if you have a machine that can run Node, you can just start developing with Next.

js. It's not like WordPress, where you have to have PHP, you have to run up your own server, like separately, using like MAMP or local or something like that. All of that is kind of already inside the Next.js setup. They provide you with the server. It's just like one line of code, you know and you, it'll, it'll just work.

And that's something that, you know, if you're not used to it, like I was coming from the world where you had to like sometimes do it separately even WordPress, of course, we have like wp-env and things that are similar now, but they weren't in the CMS world as much. The JavaScript world really optimized the developer experience.

It's one of their. Biggest strengths, I would say. Mm

Brian Coords: but what about when you do want a database for your Next.js project, then you like, like you're saying, Oh, I need to spin up like MAMP, like to get my PHP server and my SQL database and stuff. But with Next, like you don't get a database, right? Like you, now you. Pick your database off the shelf, like super base or Firebase or whatever.

And then, then you got to like, so like

Aurooba Ahmed: If you need a database, right? Because you can do lots of Next.js framework. You can make a Next.js project that does not ever use a database, you know? Or it uses like SQLite database, which is just like a file based one that you can just insert in. It's a lot more flexible. So, which is, you know, a curse and a pro.

You know, when it comes to it, you can use it with a lot of different things, but then you also have to make the choice of what to use it with. Whereas with Laravel, you know, what was so nice, and we talked about it in our episode, it comes with some decisions made for you. And then you just go with those decisions and it's easy.

Brian Coords: I think it's like a spectrum of like WordPress makes every decision for you. Like you have to meet exactly like this, but like, you know, exactly what you're going to get and it's very. Decisions, not options. Laravel is definitely in the middle where like, you do have to play like package inspector, like, do I want it this package?

Do I want to use this one? What's it going to do? And then Next.JS, I guess, to me feels like the, the wild west because it's just everything available in JavaScript and React as an option.

Aurooba Ahmed: Yeah. No, I agree. I was trying to make a comparison in my head of like iPhone versus Android, but then I don't really know what the middle ground would like say Laravel would be, like where that would belong. Because like, WordPress is a little bit like an iPhone. All the decisions are made for you. You can only do it in a particular architecture.

And the Next.JS is like, ah, do whatever the hell you want, really. Like we've made a couple decisions, but everything else is up to you. Which can be frustrating sometimes, admittedly. But where does Laravel fit? Not really sure.

Spinning up a project
---

Aurooba Ahmed: Okay, so it's honestly very, very easy to start a Next.js project if you have Node on your computer. And it's quite literally npx create next application latest. They provide it out of the box. I'm going to press enter and it's going to ask me a bunch of questions. Okay, hey, I need to install the create next app package so I can actually install this for you.

Are you cool with it? Yes, I am cool with it. What is your project called? So, you know, let's call it View Source Example. Would you like to use TypeScript? TypeScript is

Brian Coords: loaded question. All right.

Aurooba Ahmed: definitely a loaded question. TypeScript is a super set of JavaScript that has a lot of very specific and sometimes very strict typing that's supposed to help you, can sometimes be a hindrance.

It's a whole can of for sure. You know, let's say that. Let's say yes for now. We'll say yes. Why not? Do you, do you want to use ESLint? You know, do you want something that's gonna lint your JavaScript for you and help you style it? I generally think that's a good idea. So we'll say yes for that. Do you want to use Tailwind CSS?

Now that's a loaded question! What are your thoughts?

Brian Coords: let's make a list of all the things developers argue about on Twitter and then put them into the default application. Oh my gosh. Next what the next question should be like, do you use spaces or tabs when you indent code?

Aurooba Ahmed: I think that's probably decided for you in the default, but yes. Oh man, so I'm going to say no to Tailwind CSS because I don't want to focus on the Tailwind part of it. I want to look at what Next.js might look like with just basic, more, you know, the web technologies we're all familiar with. So I'm going to say no.

And then there's this question, which is a very specific Next.js question. Do you want to use the src directory? So Next.js, like Laravel, has a very specific file structure, directory structure, and in the latest version of Next.js that is currently, as of starting of Next.js 13, we're on 14 right now You can put things in the src directory, and everything else goes, the normal architecture would be outside of it, but now they put a bunch of it inside it, and this is just, it's a preference thing, but it did require a new version of Next.

js to work, basically, because a lot of people do like having a source folder, you know, where they, everything uncompiled lives, and then everything compiled lives outside, and I personally find that to be a really nice way to structure. Any kind of project where there's like build files and non so I'm going to say yes to that And then would you like to use the app router?

So this is something that we kind of already touched on but we'll touch on it a little bit more in the next episode. There are a Lot of different two different ways main ways that you can change pages, I guess, or go to different states of an application inside Next. One is called the app router and one is the one is called the page router.

The page router is a little bit like, like, it's very easy to understand. It's just like, you know, you have a home page and you have an about page and you have a a contact page. But the app router allows you to say, hey, certain things are rendered on the server and then sent to the browser and certain things are compiled in the browser and those things can work together in order to build out a page or multiple pages.

I personally think the app router is amazing, but it's rollout has been in the community a little bit problematic because they, they called it done before it was done a little bit like the block editor. you know, in WordPress. So I'm going to say yes, because that is the way forward in Next.js. So if we're going to make a series on it, we want to use the app router.

Brian Coords: Okay.

Aurooba Ahmed: And then would you like to customize the default import alias? So when you work with a lot of Partials, a lot of file partials in any kind of project, every time you need to refer to a project file, you know, you have to put in the path and you have to remember where you are, the dot dot slash dot dot slash my goodness.

So in Next.js, they like, allow you to create an alias for the root of your project. wherever your directory is, and then be able to say, say at, and then it just put in the name of the folder, perhaps where it is, and not have to worry about exactly where you are, where the current file is in the project.

It will figure it out for you. Does that make sense?

Brian Coords: Okay.

Aurooba Ahmed: It's like a little shortcut. Yeah, so that's very convenient. So I'm going to say yes. And you can change what that alias, that shortcut is. The standard is just the at sign, which I like. And once I do that, it's going to install the dependencies. And we can see the dependencies are React,

react dom, next itself, then some TypeScript things and some ESLint. So if I had actually not chosen to add TypeScript, really the only things that would get added are ESLint, react, react dom and next. So in terms of dependencies to help you get running, it's actually one of the lighter things out there that still provides you with a lot of power,

Brian Coords: Yeah. So all the types stuff is just

Aurooba Ahmed: just

Brian Coords: fun, fun TypeScript. Yeah.

Typescript and Typed Languages
---

Aurooba Ahmed: That's right. Yeah. So if I didn't do TypeScript, it would be even lighter than that. But I have personally come around to TypeScript over the last, maybe five, six months because of a project that we were on where we didn't have TypeScript and the. and the issues it caused and the typing that happened.

And I could always think about, like, if we had that, oh my god, some of these things we would have caught better, or easily, and wouldn't have had some of the issues that, because sometimes it would be like, literally we got one variable thing wrong, you know? And it was because of that, everything was breaking, and TypeScript would have caught that for us, you know?

So I've really come around to the concept of light TypeScript, not heavy TypeScript.

Brian Coords: I've been using types in PHP more where you can kind of like define what you're, you know, like it's a piece like What are my variables going to be like, what type of object or whatever? And what am I going to return and all that stuff. And it does, it does make everything feel nicer. Cause you just feel like it, like it hides some surprises, you know?

And like with code, GitHub, like co pilot code completion and stuff becoming like pretty standard. It's not like you're typing it manually. A lot of the time, a lot of the time, like,

Aurooba Ahmed: Yeah.

Brian Coords: your, your AI is kind of handling it, so I think it's

Aurooba Ahmed: Yeah. So you're helping the AI help you more that way. For sure. Yeah, no, no, I've definitely come around to some level of typing always being because JavaScript inherently is not a typed language. It's an it's an implicitly typed language, which means it assumes things based on what data data you give it instead of saying, oh, you gave me this data.

But you said you were going to give me this kind of data.

The Directory Structure
---

Aurooba Ahmed: Okay. So now we are inside our project and I've got the directory open here. I'm just going to make that a little bit bigger so we can take a look at it. And this is what a basic, almost vanilla, we did add TypeScript, but almost vanilla project in Next.js looks like. There is the TypeScript configuration.

There's a package. json because we used NPM. There is a Next. config file. a public folder, which is going to have compiled files and your source folder, which has a source and an app where all of your stuff kind of lives. So if I go into package. json, yeah,

Brian Coords: like assets folder and components folder. And like, I don't know, you know,

Aurooba Ahmed: out of the box, no, no, because yeah, that's kind of your decision, because what if you don't need a lot of components, right? What if you, yeah, so that's what I'm saying, like it's Laravel gives you some of that structure out of the box, right?

Brian Coords: Laravel has a lot of folders when you start a project and WordPress obviously folder structure.

Aurooba Ahmed: Exactly. But this is on the other side of the spectrum.

It really doesn't come with that much more. So let's hide that.

And that's a little too big.

Scripts Styles and Optimization
---

Aurooba Ahmed: So we're looking at the package. json file. And here we can see our, you know, dependency that we talked about. And we have four scripts that we can run. dev, build, start, and lint. And if you run dev it's just going to run it in development mode and it'll start a server for you.

Lint is just to test it, you know, and then you can, if you want to optimize version of the website as it would run on production, you would build, use the build command and then run the start command to create a server that will serve the optimized version. And in JavaScript, for those of you who've like, Thought and figured out and been playing with CSS and JS and other things like that, the business of JavaScript wanting to do everything only in JavaScript and not use native HTML, CSS and web technologies as they are meant to be means that the optimized version of a JavaScript application and the non optimized, there's a very big difference.

In terms of what it looks like, you know, like when you go to Twitter and you want to target something and you see all those gibberish classes. Yeah, that's CSS in JS at work at you. And I have feelings about it,

Brian Coords: I've been feeling recently that I think we're gonna turn a corner with CSS. And obviously in this sort of situation where you're pulling in like, like, well, you're referencing like CSS modules where you want to pull in like little tiny chunks of CSS, instead of loading like a giant style sheet for your entire app in one go, like, it makes sense.

Like there's a reason behind it, but I think just in general on the topic of CSS, like, I think we're going to turn a corner pretty soon where like SASS and like these pre processed and all this stuff are not going to be as necessary because vanilla CSS is getting so powerful and. The only piece I think that's missing is this ability to pull in chunks of CSS in smaller doses and stuff like that.

But I think,

Aurooba Ahmed: Natively.

Brian Coords: I think we're seeing, you know, I, that's probably like down the road of like, what is the HTML components and all that stuff. But like, you know, my point being that CSS is getting really good. And I wouldn't be surprised if people start like just throwing away CSS build processes, like entirely. Then again. This did recommend Tailwind, which is like, CSS with a massive, like, build process to, to, to clean it

Aurooba Ahmed: But it doesn't have a runtime. And I think that's really important. So you can have CSS in JS. No, you know what? We're not gonna talk about CSS in JS because we are gonna talk about it later. It is a whole thing and I have so many feelings about it. And I know you do too. We're gonna figure it out. But let's start a project and see what it looks like.

So in order to do that, I'm just gonna go npm and then we'll do run dev. You know, I've never pressed the run script button in VS Code. I'm going to press it

Brian Coords: think it does it in its built in thing, not in your terminal, though.

Aurooba Ahmed: Yes, it does. It does

Brian Coords: task.

Aurooba Ahmed: That's cool. But you know, there's an advantage to that. You know, that's kind of cool because you can have your terminal, because usually you have to have like more than one terminal open when you're doing things. But if it's just using its own script area, then you could have just one terminal open.

That's kind

Brian Coords: How do you, well, but what if you need to change the node version? I don't know. Anyway, yeah, go ahead. Yeah, yeah,

Aurooba Ahmed: I'm not sure, but I know that it's using the node version that I set in the terminal, otherwise this wouldn't work, because my default on my computer is still not node 18, it's node 12. So I always have to switch it, because I still have some projects that still use node 12, so it's just like, the default is easy.

Brian Coords: Does it come with a, an NVM? I guess you could just add that, right? If you wanted to. That's not

Aurooba Ahmed: it doesn't come with

Brian Coords: like a

Aurooba Ahmed: but you could totally add it. Yeah. Okay, so let me open up my browser.

Next.js Default Frontend
---

Aurooba Ahmed: Yeah. Alright, so we are looking at just the basic starter for Next.js. When you load it up for the first time, this is kind of what it looks like. What are your

Brian Coords: you, you know, it's modern because it's dark mode with a purpley bluey gradient. Like that tells me I'm web coding for the future. When I see dark mode, purple gradients, deep indigo gradients. Yeah, that is, that is modern web trends. Can I wait

Aurooba Ahmed: everyone's context, Brian is making fun of the trend because he hates it.

Brian Coords: it's, I mean. Trends are trends. They come and they go like, it'll, you know, who knows what it'll look like next, but it's definitely a look that you were seeing a lot of right now. So, so this was already in there. Like they give you like a default page component that has like this stuff in there. Okay.

Okay.

Aurooba Ahmed: There's a single page and that page has all of it in and here at the top it tells you, hey, you know, get started by editing source app. page. tsx and it's TSX instead of like JSX or JS because of the fact that we're using TypeScript. That took me a second to get used to personally, but now I am used to it.

It's a, but it is definitely a thing because it looks so odd, you know, page. tsx. That's not a, you're not used to looking at that extension.

Brian Coords: It's like, put the T somewhere else, but give me the dot JS dot JSX dot JS TX or something like. Don't take my J away because I need that. I need that to know what I'm looking at. So

Documentation in Next.JS
---

Brian Coords: I guess I'm still wrapping my mind around the idea that like, it's so unopinionated on how you structure your files. And I don't know why that bothers me so much.

I'm like,

Aurooba Ahmed: they do have, if you go into the docs, and this is something I do love about Next.js. So. I wouldn't say they have the best docs ever. Like I still think in some way, like Laravel has even better docs, but Next.js's docs are very good. And what I love about them is that they assume, you know, nothing. They're not assuming that you already know stuff.

So they talk about the theory a little bit, you know, they figure they help explain it. There's always an outline on the side. So if you already know the theory, you can jump to the applicable, like. Practical information that you might be looking for, but almost every page starts with some theory. So they have a project structure page, which explains a lot of things, but it does also give you recommendations on the kinds of folders and files.

You might want conventions that have been established by the community and by how people have used. Next.js. And there are certain types of files that are special. One of the ones that is really cool that we actually use in wphelpers. dev a lot because that is a Next.js project, is this concept of a folder That is named or a file, sorry, a file that is named by square brackets, dot, dot, dot, and then like either a folder or a file name.

And it knows that when you, let's say you have posts, you have all a bunch of different posts, but they're always going to use the same template, but they have different IDs. Someone can go to that ID and it's going to detect that that is what it is and just use that as their template for it. Instead of you having to create a separate page template for every single post, which would be

insane. So, it's a little bit like how CMSs help you with templating, but this is in a file based structure.

Brian Coords: like, if I put in like slash posts and an ID. You're catching a route would know. And it would, that ID would show up somewhere as a parameter that you could use to get the data for it for that post. Okay.

Aurooba Ahmed: Yeah. So, there are specialized things. Like specialized ways to do things, but it doesn't just give it to you out of the box. It says, hey, add it if you want, but you don't have

Brian Coords: another, like, starter, like I'm guessing, like, obviously like, say you're doing headless WordPress, there's going to be a Next.JS like starter specifically for headless WordPress, or maybe a Next.JS plus Supa base starter or like some of these things.

Aurooba Ahmed: No, definitely. Yeah, there's a lot. And actually, Vercel, like, really invests a lot in their templates for Next.js. So they have a whole template section and there's pretty much templates for anything. You want to make an image gallery? Great. You want to build a Next.js based AI chatbot? We've got a template for that.

You want to build docs? We've got a template for that. Dashboard? Sure. You know, you want to make a headshot generator, a photo restorer, a portfolio, like they show you, you want to build a blog that is, connects to sanity, the CMS. They have templates for a lot of things, so they work hard to, you know, show off all the flexibility that Next.

js offers, right? Even a course, like how do you build a whole course website? They have that here.

What are we building?
---

Brian Coords: okay. I have two big questions and they're tied together and. And I need, I think you can answer them both at the same time. So the first thing is, I don't know what we're actually building in this series because you have not yet told me what we're building. So my first question is, what are we building for next?

Yes. But my second question is more of a broad question, which is like, why would I, like, apparently I could do everything. I can make a course, I can make an e commerce or whatever, but obviously there's times when you want to go that route and there's times where you don't and you want to do something else.

And so. What are we building and basically why is Next.js like, why would we use Next.js for it versus

Aurooba Ahmed: Mm

Brian Coords: whatever other framework, WordPress, whatever.

Aurooba Ahmed: Yeah. So first of all, I have a little project I built a long time ago, long time ago, 2019 called WPaudit. site. And it is a checklist because, you know. We make to do lists here that are not to do lists here at viewsource. fm. It's a checklist of things that you might want to check before you launch or when you're maintaining a WordPress website.

And it has lots of sections to it. Formatting, performance, accessibility. And they're generally like for like simple things. Simple things that sometimes you might forget to check for and it just gives you like a nice checklist to go work with. And so we're going to make a version of WPAudit. site that allows you to log in, create an account and keep track of your own progress as you work through this checklist so that, because right now, if I check these off, and then I refresh the page, that's, that's going to go away.

It has no memory, really. And I can't make more than 1 checklist, you know, I can't say, oh, this was 1. This 1 was for Aurooba. com and that 1 was for BrianCoords. com, you know, so it's kind of a to do list. Yeah, go ahead.

Brian Coords: Yeah, which is, I guess I should explain the context, which is that when we did the Laravel demo, I said, let's just build a to do list. And you said, no, we can't build a to do list. That's too obvious. So we built a tool where people can suggest episodes for us, which is basically a to do list

of episodes to do. And now you're coming back to me with another, I mean, what is, what is everything, Asana is a big to do list. Trello is a to do list. Slack is essentially a to do list that I

Aurooba Ahmed: Issues are a to do list.

Brian Coords: GitHub issues are to do list. That's perfect. Yeah. That's, I mean,

Aurooba Ahmed: a to do list.

Brian Coords: which is, which is why I feel like I have so much

to do in life is because I'm surrounded by to do lists. Okay. So, okay. So I love this idea. WP helpers is like you said that. Oh, no, this is WP audit, which is not. What did you build? Listen?

Aurooba Ahmed: This is just HTML and CSS. There is nothing on here except that.

Brian Coords: Oh, okay. Okay.

Aurooba Ahmed: Yeah, it's completely static.

Brian Coords: it's cool too. Cause you think about, once this thing is like a react, how you have all these components, like those cards will be just nice reusable components. You could even like change the layout to go from like a grid to like a compact list view with like some nice CSS.

Like there's lots of cool things you can do.

Aurooba Ahmed: Yeah, see, I'm right now on, I've gone into the WP Audit repository and you can see it's literally just hard coded HTML and I do use SCSS, but not a lot of SCSS, you know, just a little bit but the actual meat of it is literally just hard coded, including the header, everything, everything is hard coded.

Brian Coords: And so you have no JavaScript. So you're not even like stashing this in the browser. Like

Aurooba Ahmed: Nothing.

Brian Coords: you know,

Aurooba Ahmed: This was a to the local storage like the cookie or save saving the state. Yeah. No, nothing at all. It technically has jQuery installed for whatever reason that I never got around to using. But yeah, I built this on a plane, in maybe two hours, and all I've ever done is add more things to it in the way that it's already written and have never really improved it.

So I was, you know, I think it's, it'll be fun to do something with it for this project. And to answer your question, Yeah, go ahead.

Brian Coords: Oh, I was just going to ask you, you said people are going to be able to log in. So where are you saving this information? Like data or where's, what's the database going to be?

Aurooba Ahmed: Yeah, we're going to use a database called Supabase because that's also open source. And in the past, I've used the service version of it, but I, I haven't decided. I've tried it. I've playing around with both, but we might just self host Supa base here so that you can see how you would do it without like needing to use us any other service except for a server.

Brian Coords: So, so yeah.

Why Next.js
---

Brian Coords: So that other question, which is like, you could build this in like WordPress with like three plugins that like jankily work together or whatever, or you could custom code this, or this would also be honestly a very good Laravel would be a perfect use case for this, like the episode suggester.

So why Next.JS? What

Aurooba Ahmed: I think that javascript react, you know, the word react itself is my answer. I guess I like interactivity is the future of the web and being able to do that without loading and reloading. So, when we built the Laravel project, suggest, so just an episode, we didn't add any, like, real time interactivity to it.

You had to submit something, the page would reload and then you would see the new information. So, and that's fine and there's nothing wrong with that. JavaScript's power is its ability to react, its ability to create things and change things and mutate things without having to reload the page. So we're gonna create an interactive version that feels like an application rather than a website for this.

Brian Coords: I'm not going to have to save, like when I check off a box, it's checked that that is immediately. Yeah. That's super nice.

Aurooba Ahmed: Yeah.

Brian Coords: I mean, you just look at it too. And you're like, Oh, now that if you're like running with React, it would be also easy to put in the URL and like. Pull things from the site or like, like there's so many cool things you can do that'll like, you know, checking like your meta tags, like you could actually do that, like, and in real time, pull up the information.

Yeah.

Aurooba Ahmed: Yeah, you can do a lot of like real time rendering real time integrations here. And I think that there's a lot of potential with JavaScript in the sort of something like this. But the idea is, let's not build a website. Let's build an application. Let's build like a little little app of ours.

Yeah. And it's a to do list app, of course, but yeah, so I think that as we walk through this series, we'll see the advantages of building it in JavaScript and also the, maybe not disadvantages, but like the decisions we had to make and what their costs were in order to be able to do this in JavaScript, which I think is a really important part of considering any framework for any project. So I'm really excited.

Brian Coords: That's a good point. Like nothing is ever perfect and it'll be interesting to see like what the holes are and what the benefits are. And even just. I, it's weird. I really did not like react. And now I've gotten to a point where it's just, I just, it's so enjoyable to use components in react. And

Aurooba Ahmed: If anyone gets curious, go back to Season 1, 3 or 4, and react, and Brian, and it's like, Brian is not happy about JSX, Brian doesn't like React, and then now look where we are.

Brian Coords: yeah, that's your fault. I blame you. Awesome. , give us a preview of what we're going to do in episode two or just a little teaser?

Aurooba Ahmed: Yeah, so next episode, we're going to look at the decisions you have to make when you decide to build something in Next.js what database do you want to use? Do you want to use CSS in JS? What components do you want to use? What is the design language you want to use? And we'll also look at how do you authenticate?

How do you use How do you integrate with a database and make a new account? You know, how does that work if you're not inside a CMS that just gives it to you?

Brian Coords: Oh yeah. I didn't even think about that. Like you, you want, yeah, people are going to log in, create accounts. I mean. Set passwords? I mean,

Aurooba Ahmed: exactly. There's a lot going on, right? And I mean, with, with Laravel, we had Breeze, the

Brian Coords: yeah,

Aurooba Ahmed: to do that for us. What are we going to do here? So that's what we're going to do. Look at next episode.

Brian Coords: all right. Awesome. I'm very excited to find out. All

Aurooba Ahmed: All right. Well, I'll see you next episode then.

Brian Coords: right. See you then.