# Building with Next.js - Part 1  ## Episode metadata - Episode title: Building with Next.js - Part 1 - Show: viewSource - Owner / Host: Aurooba Ahmed, Brian Coords - Episode publish date: 2024-01-08 - Episode AI description: They introduce Next.js and explain what problems it solves. They walk through spinning up a new project and the default file structure. They discuss TypeScript, routing conventions, CSS and optimization choices. They cover hosting options, bootstrapping choices, and what they plan to build next. - Duration: 44:15 - Episode URL: [Open in Snipd](https://share.snipd.com/episode/3ada5228-32b0-42f1-bbdc-c2231958458c) - Show URL: [Open in Snipd](https://share.snipd.com/show/33c7b322-0528-48dc-bee8-d1596a703c79) - Export date: 2026-02-17T23:24:34 ## Snips ### [Next.js Unifies Frontend And Backend](https://share.snipd.com/snip/af8cb40e-b8a9-41d9-9c62-4249f3d73a5c) 🎧 01:32 - 04:31 (02:59) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/1a1046e1-bb93-47a9-a936-9d06c18fbcc2" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Next.js is a React framework that unifies front-end and back-end development in one codebase using JavaScript. - It lets teams use one language for UI and server logic, reducing context switching and onboarding friction. #### 💬 Quote > Next.js is a React framework...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. > — Aurooba Ahmed Aurooba Ahmed explaining what Next.js is #### 📚 Transcript **Aurooba Ahmed:** So Next.js is such a And 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:** you **Aurooba Ahmed:** know it was it was it was my first real next js project that was so complicated you know before that i 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 going to 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 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 the these frameworks like Next.js they want to do the front end the back end the middle everything yeah **Brian Coords:** i think i struggle 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 jess yeah 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 this 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 yeah 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 i **Aurooba Ahmed:** 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, 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, you might not always do that. You might write a back end in Laravel and then do the front end in just HTML, CSS with maybe a PHP templating language or maybe in JavaScript, right? But Next.js is trying to do all of it all together. --- ### [SPAs Rely On Async Hydration](https://share.snipd.com/snip/a635daaf-68d3-4575-82f1-a60dac8260b8) 🎧 05:37 - 06:42 (01:04) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/a4a60f8a-6f41-4876-a3ed-a501250d818c" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Single-page applications send minimal HTML and then hydrate with JavaScript asynchronously. - That async model enables rich interactivity but requires a different mental model than traditional page reloads. #### 💬 Quote > 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. > — Aurooba Ahmed Aurooba Ahmed describing SPA behavior #### 📚 Transcript **Aurooba Ahmed:** 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. 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. --- ### [When SPAs Make Sense](https://share.snipd.com/snip/85439160-13f0-4b67-994b-7b70ddeaeaf7) 🎧 07:29 - 09:34 (02:04) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/b591ca3a-3623-4fcb-b598-08179c7a5110" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - SPAs shine when you reuse UI across pages and aggregate multiple APIs into one client experience. - Next.js bridges SPA interactivity with URL-driven pages so states can be shared and deep-linked. #### 💬 Quote > A single page application makes a lot of sense you have a lot of reusable components that you're constantly using. > — Aurooba Ahmed Aurooba Ahmed on SPA use-cases #### 📚 Transcript **Aurooba Ahmed:** I think 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 you have a lot of reusable components that you're constantly using. Because in a single page application that your 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 have the header and the navigation and the footer. 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 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 APIs 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 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. --- ### [Start Quickly With Create Next App](https://share.snipd.com/snip/1ed8a86d-dea7-413c-a151-241149b03f40) 🎧 14:27 - 16:19 (01:52) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/662e213f-23be-491e-bc00-41b4c5657f4a" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - You can host Next.js anywhere that runs Node, but Vercel is the recommended platform. - Choose hosting based on team needs, but expect easy local dev via npx create-next-app and built-in server tooling. #### 💬 Quote > 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. > — Aurooba Ahmed Aurooba Ahmed demonstrating how to scaffold a Next.js project #### 📚 Transcript **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 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 on any server that can run Node, essentially. Okay. Because **Brian Coords:** it's fully open source. Like Next.js is an open source framework anyone can use anywhere. **Aurooba Ahmed:** Definitely. Yeah. It's an open source. Anyone can use it i believe the project that we did we used it and we built it on top of netlify as our platform but you could just buy a digital oceans 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 yeah yeah and you can do static generation or dynamic but you know that's getting into the weeds a little bit um 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 map or local or something like that all of that is kind of already inside the next js setup they provide you with the server they 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 WPN and things that are similar now, but they weren't in the CMS world as much. --- ### [Choose Setup Options Intentionally](https://share.snipd.com/snip/bbf00a77-a964-498f-a6fe-e6d7fdf4948c) 🎧 18:20 - 23:27 (05:07) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/f2ca041c-f76f-4eb8-9a55-2632802456d2" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - When creating a Next app, answer setup prompts (TypeScript, ESLint, Tailwind, app router) to match your project's needs. - Prefer the app router for modern patterns but weigh stability and community readiness before enabling it. #### 💬 Quote > Would you like to use the app router...I personally think the app router is amazing, but its rollout has been in the community a little bit problematic because they called it done before it was done. > — Aurooba Ahmed Aurooba Ahmed walking through create-next-app prompts #### 📚 Transcript **Aurooba Ahmed:** 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 a loaded question. **Brian Coords:** It's **Aurooba Ahmed:** definitely a loaded question. TypeScript is a superset 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 worms for sure. You know, let's say that, let's say yes for now. We'll say yes. Why not? Do you want to use ESLint? You know, do you want something that's going to 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? That's a loaded question. What are your thoughts? **Brian Coords:** They were like, let's make a of all the things developers argue about on Twitter and then put them into the default application. Oh my gosh. The next question should be like, do you use spaces or tabs when you indent code? I **Aurooba Ahmed:** 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 source 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 source 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 in 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 homepage and you have an about page and you have 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 work together in order to build out a page or multiple pages. I personally think the app router is amazing, but its rollout has been in the community a little bit problematic because 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 gonna make a you know series on it we want to use the app router okay 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, slash, dot, dot, slash, my goodness. So in Next.js, they like allow you to create an alias for the root of your, wherever your directory is, and then be able to say, say at, and then just put in the name of the folder, where it is, and not have to worry about exactly where you are, where the current file is in the project. will figure it out for you. Does that make sense? **Brian Coords:** Okay. Yeah. It's **Aurooba Ahmed:** 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, ReactDOM, and Next. --- ### [Dev vs Production Builds Differ Greatly](https://share.snipd.com/snip/760806e6-23ae-4e8c-8fba-451e9186258b) 🎧 25:26 - 27:01 (01:34) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/d5027940-89d7-4750-959f-d38c76133a4a" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Next.js projects include dev, build, start, and lint scripts that alter behavior between development and optimized production. - The optimized production build can look and behave very differently from dev due to bundling and CSS/JS transforms. #### 💬 Quote > If you want to optimize version of the website as it would run on production, you would use the build command and then run the start command to create a server that will serve the optimized version. > — Aurooba Ahmed Aurooba Ahmed explaining Next.js scripts and builds #### 📚 Transcript **Aurooba Ahmed:** And this is what a basic, almost vanilla, we did add TypeScript, but almost vanilla project in Next.js looks like. There is a 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:** There's no like assets folder and components folder and like, I don't know, you know. Out of the box? No. No, **Aurooba Ahmed:** 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? Laravel **Brian Coords:** has a lot of folders when you start a project and WordPress obviously has a 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. So we're looking at the package.json file. And here we can see our 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. And then if you want to optimize version of the website as it would run on production, would use the build command and then run the start command to create a server that will serve the optimized version. --- ### [Docs And File-Based Routing Make Patterns Clear](https://share.snipd.com/snip/6fb70059-ebba-4756-872f-36d4613a63d4) 🎧 32:10 - 33:53 (01:43) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/e5b4b7a9-9bef-4b5c-8ac7-9c22820e51ca" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Next.js docs teach theory and practical patterns and assume minimal prior knowledge. - The framework supports file-based routing with dynamic segments using bracket syntax for templated pages. #### 💬 Quote > They assume you know nothing...one of the ones that is really cool...a file that is named by square brackets, dot, dot, dot...and it knows that when you...have posts...they're always going to use the same template. > — Aurooba Ahmed Aurooba Ahmed praising Next.js documentation and routing #### 📚 Transcript **Aurooba Ahmed:** So they, 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 insane. So it's a little bit like how CMSs help you with templating, but this is in a file-based structure. --- ### [WPAudit Started As Static HTML](https://share.snipd.com/snip/87a84b08-e60d-4113-b40d-bc8f668144b5) 🎧 36:02 - 39:27 (03:25) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/7040880b-068b-4bf0-85ed-5fdc87584169" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Aurooba built wpaudit.site as static HTML and SCSS and never added state or JS persistence. - She wants to rebuild it in Next.js so users can log in and save personalized checklists. #### 💬 Quote > I built this on a plane in maybe two hours...the actual meat of it is literally just hard-coded, including the header, everything. > — Aurooba Ahmed Aurooba Ahmed describing the origins of wpaudit.site #### 📚 Transcript **Aurooba Ahmed:** 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. 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 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 WPI.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 I refresh the page, that's going to go away. It has no memory really. And I can't make more than one checklist. You know, I can't say, oh, this was one, this one was for Aruba.com and that one was for BrianCords.com, you So it's kind of a to-do list. Yeah, go ahead. Yeah, **Brian Coords:** which is, I guess I should explain the context, which is that when we 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? Sana is a big to-do list. Trello is a to-do list. Slack is essentially a to-do list that I chat with people. Issues are a to-do **Aurooba Ahmed:** list. GitHub **Brian Coords:** issues are a to-do list. That's perfect. Yeah. That's, I mean, **Aurooba Ahmed:** everything's a to-do list. **Brian Coords:** Yeah. 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. Yes. 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 this in? **Aurooba Ahmed:** This is just HTML and CSSss there is nothing on here except that oh **Brian Coords:** okay okay yeah **Aurooba Ahmed:** it's completely static it's **Brian Coords:** cool too because 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. Yeah. **Aurooba Ahmed:** 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. And **Brian Coords:** so you have no JavaScript. So you're not even like stashing this in the browser, like... **Aurooba Ahmed:** Nothing. You **Brian Coords:** know? Yeah. What am I trying to say? **Aurooba Ahmed:** This was the local storage, like the cookie. Local storage. 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'll be fun to do something with it for this project. --- ### [Pick A Database Deliberately](https://share.snipd.com/snip/0e720fc4-3267-4068-8455-9fbfbfb12d09) 🎧 39:40 - 41:08 (01:28) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/d5309c9b-49b5-4622-96ee-ccb40a7ca502" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - For persistent user data, pick a database solution; Aurooba plans to use Supabase and may self-host it. - Evaluate managed vs self-hosted options to avoid vendor lock-in while keeping setup complexity in mind. #### 💬 Quote > We're going to use a database called Supabase because that's also open source. And...we might just self host Supabase here so that you can see how you would do it without...using any other service except for a server. > — Aurooba Ahmed Aurooba Ahmed on choosing Supabase for the project #### 📚 Transcript **Aurooba Ahmed:** 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 Supabase here so that you can see how you would do it without like needing to use any other service except for a server. So, **Brian Coords:** so yeah. So that other question, which is like, you could build this in like WordPress with like three plugins that like jinkly 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 suggestion. So why Next.js? What makes it a **Aurooba Ahmed:** good thing? JavaScript, React, you know, the word React itself is my answer, I guess. 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 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 going to create an interactive version that feels like an application rather than a website for this. --- Created with [Snipd](https://www.snipd.com) | Highlight & Take Notes from Podcasts