#Nextjs

[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.

[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

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

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

[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.

[aakashweb]

Looking for a #gatsbyjs or #nextjs like equivalent for #WordPress ? "Git it write" might help. It is a plugin using which you can publish posts from Github ! More info - https://wordpress.org/plugins/git-it-write/

[asadmukhtarr]

In today’s web development world, Search Engine Optimization (SEO) is crucial for the success of any website. For React developers, SEO can be a challenge because React is a client-side JavaScript framework, meaning that the content is rendered dynamically on the client side. This can pose problems for search engine bots that may not fully execute JavaScript or render the content properly.

To solve this, Server-Side Rendering (SSR) has become an essential approach. SSR allows web pages to be pre-rendered on the server, providing search engines with HTML content that can be easily indexed.

In this guide, we will walk you through the process of setting up SSR in React using Next.js, a powerful framework built on top of React. By the end, you'll understand how SSR works in Next.js and how it helps improve SEO.

[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) 💛

[xiffu85]

[techstuff19]

7 Steps for Migrating an Existing React Project to Next.js – A Comprehensive Guide

Thinking about upgrading your React project? Learn the 7 essential steps for Migrate React to Next.js project to enhance performance, SEO, and scalability. This guide covers key strategies, potential challenges, and best practices for a smooth transition to Next.js.

[nubecolectiva]

How Next.js Renders with SSR !

Cómo Renderiza Next.js con SSR !

🔎Zoom: https://nubecolectiva.com/comunidad/flyers-e-imagenes-de-programacion/