Forem: Gündoğdu Yakıcı

Should I add a not-found.jsx file for each page?

Gündoğdu Yakıcı — Fri, 31 Mar 2023 12:46:13 +0000

Hello,

I have a not-found.jsx file under the App folder, and on some pages I redirect to the notFound() function for some situations and I see the design. However, no link works. It does not redirect.

But if I add not-found.jsx in this page folder, it works fine. Do I have to add not-found.jsx to each page individually?

My Next.js version is 13.2.3.

Send background props to other component

Gündoğdu Yakıcı — Wed, 29 Mar 2023 08:45:15 +0000

Hello,
I am switching from one component to another with , but I want to send a data to the other component in the background. For example; google maps place id. When I do as below, the placeId query appears in the URL section. I just want it to show a url in the form of direct /map but I want to send the placeId to the other component in the background. Can this be done?

<Link href={{{pathname: '/map', query: { placeId: 'test' }}}> Map </Link>

Multiple title tags in source code

Gündoğdu Yakıcı — Sat, 25 Mar 2023 14:21:46 +0000

Hello,

I am using Next.js version 13.2.3.
I use the metadata for server side pages as follows, there is no problem.
(https://beta.nextjs.org/docs/api-reference/metadata#generatemetadata)

export const metadata = { title: 'About' }

I use it like this in Layout.jsx;

export const metadata = { title: { default: 'Home Page', template: '%s | App Name', } }

Everything works fine so far, but sometimes I have to use "use client"; on some pages and when I do that, the use of const metadata doesn't work. As a solution, I create head.jsx in that page folder and it works. Example;

export default async function Head({ params }) { return ( <> <title>Test | App Name</title> <meta name="description" content="description is here"></meta> </> ); }

But the problem here is that there are two

tags in the source code. The first tag is "Home Page" and the other tag is the title I added in head.jsx. Has anyone encountered this problem before? What kind of solution should I follow? I hope I was able to explain.

How to use metadata client-side? v13.2

Gündoğdu Yakıcı — Mon, 20 Mar 2023 08:36:03 +0000

Hello,
I have reviewed the documentation and the metadata works successfully. But on some pages I have to use "use client" and this method doesn't work. What can I do for this?

export const metadata = { title: 'Login' };

What's the matcher?

Gündoğdu Yakıcı — Sun, 12 Mar 2023 13:39:40 +0000

Hi there,

I'm new in Next.js 13. I have a question for you. I will make a multi language web site and for this I use middleware.js.
My folder structure; app/[lang]/file-name.jsx etc.

But I don't understand what's meaning the matcher feature. What does it do? What happens if I don't use it?

export const config = { matcher: ["/((?!_next).*)", "/:lang*"], };

I already have access to the incoming parameter because of the [lang] structure. Why do we use it for matcher. What is the logic to use here? Can you explain with an example?

Mobile menu logic

Gündoğdu Yakıcı — Thu, 23 Feb 2023 20:33:43 +0000

Hello,

I'm using Next.js 13, so I'm new to react. I designed a simple header with Tailwind. When I log in from mobile, I hide the menu and show a hamburger.

When I clicked on this, I prepared a component called MyModal to use it in different operations in many places (for login, register, search, etc.) Because it will be a 90% mobile-based website.

When I use MyModal in the header component and click on the hambuger, I write a mobile-friendly ul menu in it.

Is this kind of approach bad or used for mobile menu? What is your opinion?

How to add css from React folder?

Gündoğdu Yakıcı — Tue, 17 Sep 2019 13:01:05 +0000

Hello,

I'm working on next JS project. I want to add my own css file but I get error not found file in console. Can you help me ?

code
< link href="../assets/css/style.css" type="text/css" rel="stylesheet" />

File Path
assets
~ css
~ style.css
components
~ Layout.js
node_modules
pages

About React code structure

Gündoğdu Yakıcı — Tue, 17 Sep 2019 07:43:24 +0000

Hello,
I started learn Next JS. But there's one thing I don't understand.
There are many types of writing in React. I don't know which one is better to use.

For example;

function Test() { return

test }

export default () =>

test

class Prices extends React.Component {
// some code
}

export default Prices;