#Nextjs

[kitkatcodes]

100 Days of Code - Day 6 ・゜゜・．

✧*6/28/2023*✧

finally added a much wanted feature to my todo app! ( ◡̀_◡́)ᕤ

!!!saving tasks in local storage!!!

⁽ᴵ ᵃˡˢᵒ ᵃᵈᵈᵉᵈ ᵃⁿ ᵃᵈᵈ ᵗᵃˢᵏ ᵇᵘᵗᵗᵒⁿ ᵇᵘᵗ ᵗʰᵃᵗˢ ⁿᵒᵗ ᵃˢ ⁱᵐᵖᵒʳᵗᵃⁿᵗ⁾

so when you refresh or close the page and come back to it your tasks still stay there wooooo ৻( •̀ ᗜ •́ ৻)

it still looks absolutely terrible but its one step forward!!

next steps/future features:

✧ delete task button ✧ rearrange tasks

. • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆

. • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆

[vulshokbersrker]

More Updates on Bray Archive

So I did a lot of work on the site in the past few days, and it is looking good. I got the home page finally working. You can see I have a moving home banner and the grid tiles for a hub of links.

Multiple Device Support

I have started the fun/annoying/hard work on adding mobile and 4K support to this project.

When you start adding multiple devices to worry about, you also have to rework the original design of a project. Which is what I had to do. I reworked a lot of the entry pages and stuff to keep their old look while making it dynamic with phones and 4K monitors.

Here is one example: (The wide boy, also icon didn't load in time for the mobile view)

I am getting closer to getting this thing "finished."

So far I have done some smaller phones, 720p monitors, 1080p monitors and 4K monitors. Still need to add tablet and larger phone support.

Before I go, let me leave you with my first thought when I was the screen shot for the Untethered Edge Hood.

[dazzlebirds031]

Why Choosing the Right Web Development Team Matters More Than Ever in 2025

In 2025, a website is so much more than being your web presence. It's your original impression, your highest marketing asset, and often your best-working staff member working 24/7. But having a site that really generates results? That needs something more than coding skills. Selecting the ideal web development team is no longer merely an astute notion it's something that can determine the destiny of your company.

 Why This Choice Matters:

Tech Moves Fast

The modern online world evolves fast. The top web teams collaborate with current technologies such as React, Next.js, and headless CMS solutions like Contentful or Strapi. If your site is developed using obsolete tools, it will not take long to fail.

UX is the New Standard

It's not sufficient that your site looks great—it must feel wonderful to use. Clean navigation, quick loading, and mobile-first design all contribute significantly to turning visitors into customers.

Built for Growth & Security

The right development partner will make sure your website is not only secure and fast but also ready to scale as your business grows. No patchy upgrades or quick fixes—just smart, solid development.

 You’ll Need Support After Launch

Your journey doesn’t stop once the site is live. Bugs happen. Updates are needed. A dependable team will stick around to monitor, optimize, and improve over time.

 Meet DazzleBirds: Your Growth-Oriented Web Partner

If you are looking for a team that does more than simply provide a website—look no further than DazzleBirds.

At DazzleBirds, it's not about code alone. It's about building custom web solutions that fit your objectives and lead to long-term success.

What Sets DazzleBirds Apart?

Efficient, Clean, future-proof code

Mobile-first, user-centered design

Profound business strategy knowledge

Full-cycle support—from concept through launch and beyond

Whether you are starting a startup, relaunching a design firm, or growing an enterprise, DazzleBirds is ready to build with intention & assist you in expanding.

Ready to elevate your digital game? Explore more at 👉 dazzlebirds.com

Let your website work smarter — with DazzleBirds by your side

[blackjackkent]

Livecoding on Twitch!

Time to spend another Sunday afternoon coding! I'm doing some more work on a NextJS migration of the RPThreadTracker app; today we're figuring out more of the auth flow. Come hang out and say hi, bring some questions, or just chill and chat!

I offer free software development tutoring for new devs and pro-bono web development services for organizations working for progressive change. Visit http://www.blackjack-software.com/about for more information or ask me about it in my Twitch chat!

[koshekdev]

Project update (Next.js) + little API routing tutorial

So my last post was about setting up my back-end using Node.js and Sequelize. After setting everything up it was time to create needed routes and queries. I didn't look too much into how to do it, just made an api folder, made a .ts file for every table I have in my database and filled it with CRUD operations + whatever additional query was needed.

After writing all of this I wondered how do I define links for all of these operations? Well as it turns out, when you put files in an api folder in Next.js, they generate by themself, meaning all of my crud operations were now under the same /api/file_table_name link. Obviously that's bad news. It took me 2 days of rearranging (it wasn't hard, just boring XD) and I got this structure

(This is not an entire structure, just a snippet because the whole structure is kinda big and pointless for demonstration)

So now for getting host/api/tag we have an index.ts file which carries the createTag function which requires just a body that contains new tagName.

For host/api/tag/id we have the [id].ts which carries getTagById and DeleteTag function. Now how do we differentiate between those two operations when they are on the same link?

At the end of your file you should have a handler function for which you write the cases in which certain operation happen. In this case it only depends on the http method, but it is possible to add other cases such as potential query string (the on that start with ? in the link ex. api/posts?sort=asc). Here's the code example from my /stickerpack/[id].ts file

So this means the link is going to be host/api/stickerpack/id?type="".

What surprised me was that you don't fetch id with req.params.id, but you fetch everything with req.query, and Next.js I guess just figures out what is a parameter and what is not based on the file name. Another surprising thing is the obvious "id as any" situation XD. It did not work any other way. No idea why. I'll look it up when I get the energy.

That's my wisdom for today, if you have any questions feel free to ask me anywhere XD I'm no professional tho lol

[mydevdiary]

Svelte Basics: First Component

I'm going through the Svelte tutorial since it's very comprehensive and up-to-date.

I'm going on a bit of a tangent before I start this post, but I'm straying away from YouTube videos and Udemy courses when learning new programming languages and frameworks. YouTube videos are too fragmented to get good information from. Courses (and YouTube videos) are usually not up-to-date, rendering parts of them useless. Not to mention that you have to pay for free information that's packaged in a course, which is kind of scummy.

Anyway, I've gotten quite a bit further than just the introduction section of Svelte basics, but I don't want to overload myself (or readers) with information.

My First Svelte Component:

This section was relatively straightforward. There wasn't much new information, but I was hooked because of its simplicity. I personally love the idea of having the script tags be a place to define variables and attributes:

<script> let var = "a variable!" </script>

<p>I'm {var}</p>

The example above shows how dynamic attributes are used. I can basically define any variable (and states, but that'll be for the next post) between the script tags that can be used in HTML.

This may seem mundane to programmers experienced in Svelte, but I think it gives really good insight into the philosophy behind Svelte. It's clear that they wanted to keep the language simple and easy to use, and I appreciate that.

As I mentioned in my introductory post, I have a background in React, which has a reputation for being convoluted. Well, maybe that's just my perception, but how Svelte is written is a breath of fresh air!

I look forward to making more posts about what I learn and my attempts at understanding it.

Until next time!

[themesflat]

-Is your IT service website too slow? 🤔

🚀 Power Up Your IT Services Website with #innovationTechbe! 🚀

Techbe – the premier React & NextJS template crafted for IT services and technology businesses.

🔹 Cutting-edge design 🔹 Fast and responsive performance 🔹 Effortless customization

Transform your tech business and captivate your audience with Techbe. Ready to lead the future? 🌟

See Demo & Download : https://1.envato.market/anyBYq

[snaildotexe]

Simple react/next js todo list

Modeled after this tutorial by Web Dev Simplified, but using Next.js and Tailwind

I think following a plain react tutorial while using next js is what gave me some issues, especially being my first react project. I probably should have learned some basic react first before going into frameworks, but oh well.

Trying to line up the text with the CSS paper was a huge pain. I still don't like how it looks but at least it's not floating through the lines anymore lol.

The data persistence gave me the most trouble (took me like FIVE hours 😭). The way it was done in the video did not work for me at all, so I had to figure it out. Local storage can't be accessed during server-side rendering, so accessing localStorage has to be done during client-side rendering, using the useEffect hook. But, as I've learned, the useEffect hook doesn't have a return value, and hooks can only be called at the top level. Then I found out that React intentionally calls useEffect twice and that was resetting my local storage with the empty initialization value -_- But in the end i got it working :)

Now I wanna add some more features; a delete all, clear selected, maybe edit note.

[devcoder2]

Coming soon...

[jujuthewulfpup]

1. Video games: Factorio, Satisfactory, Overwatch 2, Hogwarts Legacy, Hollow Knight, …

2. I am a software engineer by trade and do volunteer coding and personal coding in my free time. I just don’t have posting to social media as a reaction to … anything related to those things.

I am currently/still looking for more coding/software engineering content! Feel free to share tags/blogs you like.

I am very much on my computer a LOT as a consequence of these hobbies.

[techstuff19]

Why Headless WordPress + Next.js is a Future-Proof Solution

As digital experiences become more dynamic and omnichannel, the need for a flexible, high-performance web architecture is more critical than ever. One powerful combination that has emerged is Headless WordPress with Next.js, a future-proof stack that bridges the ease of content management with the performance of modern frontend frameworks.

Whether you’re building a blog, corporate site, or complex eCommerce solution, this pairing gives you the scalability and control you need for the long run.

Why Go Headless?

Traditional CMS platforms like WordPress come with tight coupling between frontend and backend, which can be limiting in terms of performance, SEO, and flexibility. With a headless CMS setup, WordPress acts as a pure content backend, while Next.js handles the frontend rendering.

When it comes to online stores, combining WordPress with modern frontend solutions delivers the benefits of eCommerce CMS  better UI/UX, enhanced performance, and seamless integration across sales channels.

Sample Integration: Fetching WordPress Posts with Next.js

You can easily fetch content from your WordPress site using its REST API:

Js

// lib/api.js

export async function getPosts() {

  const res = await fetch('https://yourwordpressdomain.com/wp-json/wp/v2/posts');

  const posts = await res.json();

  return posts;

}

Then render in a Next.js page:

js

// pages/index.js

import { getPosts } from '../lib/api';

export default function Home({ posts }) {

  return (

    <div>

      <h1>Latest Posts</h1>

      {posts.map(post => (

        <div key={post.id}>

          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />

          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />

        </div>

      ))}

    </div>

  );

}

export async function getStaticProps() {

  const posts = await getPosts();

  return {

    props: { posts }

  };

}

This approach allows you to build static or server-rendered sites that are lightning fast and SEO-friendly.

DevOps Bonus: Automate with CI/CD

Maintaining performance and deployment consistency is key. Automating builds via GitHub Actions ensures smooth rollout. If you're new to it, here’s a handy guide on CI/CD Pipelines for Next.js Projects with GitHub Actions.

When to Hire Experts

Implementing a headless architecture can be technically demanding. If you want to streamline development, performance optimization, and integration, it’s smart to hire Next.js developers who are experienced with CMS and modern web standards.

Final Thoughts

Combining Headless WordPress with Next.js is more than a tech trend it’s a strategic move toward speed, security, and scalability. With a modern CMS on the backend and a performance-first frontend, your digital product is ready for the future.

[jblogify]

Deployment of Next.js App: Choosing the Right Path for Your Project

[krunalpanchal]

Developing Real-Time Collaborative Applications Using Next.js

Developing real-time collaborative applications with Next.js empowers developers to create dynamic, interactive platforms that facilitate seamless user interactions. By leveraging Next.js's robust features alongside real-time communication technologies, developers can build applications that offer instant updates and enhanced user experiences.

[koshekdev]

I want to do a programming update so bad but all the stuff I worked on is so boring and I know there is no use to even make tutorials for them cuz they are such specific things and codeblr is just too broad and general for that kind of content...I'll try to make some next.js good practices post soon maybe since I see a lot of interest for web dev and a lot of people are learning by themselves with no mentors, there is def a lot of knowledge that is way more easily gained through talking to more experienced devs, and is very hard to acquire from tutorials and practice (unfortunately). I know that from the experience :/ learning everything by yourself is hard as hell and I really want to congralute everyone who are still on their programming journey (or whatever other journey hehe, everything is hard to perfect) 💛