Google adsense nextjs

ynhilyai · Nov 15, 2023

#Googleadsense #NextJS #headlesscms #JamStack #staticsiteGeneration ## Cách sử dụng Google AdSense với Next.js

Google Adsense là một nền tảng quảng cáo phổ biến cho phép bạn kiếm tiền bằng cách hiển thị quảng cáo trên trang web của mình.Next.js là một khung phản ứng giúp dễ dàng xây dựng các trang web hiện đại, nhanh chóng.Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Google AdSense với Next.js.

### Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn sẽ cần những điều sau đây:

* Một dự án tiếp theo.js
* Tài khoản Google AdSense
* Dự án nền tảng đám mây của Google

### Bắt đầu

Để bắt đầu, hãy tạo một dự án mới tiếp theo bằng cách sử dụng lệnh sau:

`` `
NPX created-next-app app-app
`` `

Điều này sẽ tạo ra một dự án mới tiếp theo trong thư mục `my-app`.

Tiếp theo, cài đặt [Thư viện phản ứng Google Adsense] (https://www.npmjs.com/package/@google-adsense/react) bằng lệnh sau:

`` `
NPM Cài đặt @Google-Adsense/React
`` `

### Thêm Google AdSense vào dự án tiếp theo của bạn.

Để thêm Google AdSense vào dự án tiếp theo của bạn, bạn cần tạo tệp `adsense.config.js` mới trong thư mục gốc của dự án của bạn.Tệp này sẽ chứa ID tài khoản Google AdSense của bạn và các tùy chọn cấu hình khác.

Dưới đây là một ví dụ về tệp `adsense.config.js`:

`` `JS
const {adsense} = yêu cầu ('@google-adsense/react');

const config = {
PublisherId: 'your_google_adsense_account_id',
adunitid: 'your_google_adsense_ad_unit_id',
};

Xuất cấu hình mặc định;
`` `

Khi bạn đã tạo tệp `adsense.config.js`, bạn có thể sử dụng thành phần` googleadsense` để hiển thị quảng cáo trên các trang tiếp theo của bạn.

Dưới đây là một ví dụ về cách sử dụng thành phần `googleadsense`:

`` `JSX
Nhập {googleadsense} từ '@google-adsense/React';

const homePage = () => {
trở lại (
<Div>
<Googleadsense />
</div>
);
};

Xuất trang chủ mặc định;
`` `

### Kiểm tra triển khai Google AdSense của bạn

Khi bạn đã thêm Google AdSense vào dự án tiếp theo của mình, bạn có thể kiểm tra triển khai của mình bằng cách chạy lệnh sau:

`` `
NPM chạy Dev
`` `

Điều này sẽ bắt đầu một máy chủ phát triển trên cổng 3000. Sau đó, bạn có thể mở trình duyệt của mình và điều hướng đến `http: // localhost: 3000` để xem trang web của bạn.

Nếu bạn đã cấu hình chính xác tài khoản Google AdSense của mình, bạn sẽ thấy quảng cáo được hiển thị trên trang web của mình.

### Phần kết luận

Trong hướng dẫn này, bạn đã học cách sử dụng Google AdSense với Next.js.Bạn đã học cách tạo tài khoản Google AdSense, cách thêm Google AdSense vào dự án tiếp theo của bạn và cách kiểm tra triển khai Google AdSense của bạn.

### Tài nguyên bổ sung

* [Tài liệu Google AdSense] (https://developers.google.com/adsense/)
* [Next.js tài liệu] (https://nextjs.org/docs/)
* [Thư viện phản ứng của Google Adsense] (https://www.npmjs.com/package/@google-adsense/react)
=======================================
#Googleadsense #NextJS #headlesscms #JamStack #staticsiteGeneration ## How to use Google Adsense with Next.js

Google Adsense is a popular advertising platform that allows you to earn money by displaying ads on your website. Next.js is a React framework that makes it easy to build fast, modern websites. In this tutorial, we will show you how to use Google Adsense with Next.js.

### Prerequisites

To follow this tutorial, you will need the following:

* A Next.js project
* A Google Adsense account
* A Google Cloud Platform project

### Getting Started

To get started, create a new Next.js project using the following command:

```
npx create-next-app my-app
```

This will create a new Next.js project in the `my-app` directory.

Next, install the [Google Adsense React library](https://www.npmjs.com/package/@google-adsense/react) using the following command:

```
npm install @google-adsense/react
```

### Adding Google Adsense to your Next.js project

To add Google Adsense to your Next.js project, you need to create a new `adsense.config.js` file in the root directory of your project. This file will contain your Google Adsense account ID and other configuration options.

Here is an example of an `adsense.config.js` file:

```js
const { adsense } = require('@google-adsense/react');

const config = {
publisherId: 'YOUR_GOOGLE_ADSENSE_ACCOUNT_ID',
adUnitId: 'YOUR_GOOGLE_ADSENSE_AD_UNIT_ID',
};

export default config;
```

Once you have created the `adsense.config.js` file, you can use the `GoogleAdsense` component to display ads on your Next.js pages.

Here is an example of how to use the `GoogleAdsense` component:

```jsx
import { GoogleAdsense } from '@google-adsense/react';

const HomePage = () => {
return (
<div>
<GoogleAdsense />
</div>
);
};

export default HomePage;
```

### Testing your Google Adsense implementation

Once you have added Google Adsense to your Next.js project, you can test your implementation by running the following command:

```
npm run dev
```

This will start a development server on port 3000. You can then open your browser and navigate to `http://localhost:3000` to see your website.

If you have configured your Google Adsense account correctly, you should see ads displayed on your website.

### Conclusion

In this tutorial, you learned how to use Google Adsense with Next.js. You learned how to create a Google Adsense account, how to add Google Adsense to your Next.js project, and how to test your Google Adsense implementation.

### Additional resources

* [Google Adsense documentation](https://developers.google.com/adsense/)
* [Next.js documentation](https://nextjs.org/docs/)
* [Google Adsense React library](https://www.npmjs.com/package/@google-adsense/react)

Google adsense nextjs

ynhilyai

New member