Twitter clone Part6　右側にニュース欄を加える

# 概要
今回は右側にニュース欄を加えます。
News APIからニュース情報を取得
「Show more」ボタンを押すと表示するニュース件数を３件増やす

![newsaaaaaaaaaaa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/41070418-f4e2-ee21-8e8d-9edfcfcf8eff.gif)



# 開発環境

OS:Windows10
IDE:VSCode


```package.json
{
  "name": "",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "@types/react": "^18.2.15",
    "autoprefixer": "^10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  }
}
```

# 実装のポイント


## NewsAPIでデータ取得してブラウザ上で表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4f692ce0-3986-f199-ed1f-490d0d399400.png)


## show moreボタンを押すと表示件数が+3される　表示件数の変数をuseEffectにする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/69f81fc5-0389-abc1-4c97-b7a1b0059d94.png)






# コード部分
## News
```diff_jsx:News.jsx
export default function News({article}){
    return(
        <a href={article.url} target="_blank">
            <div className="flex items-center justify-between px-4 py-2 space-x-1 hover:bg-gray-200 transition duration-200">
                <div className="space-y-0.5">
                    <h6 className="text-sm font-bold">{article.title}</h6>
                    <p className="text-xs font-medium text-gray-500">{article.source.name}</p>
                </div>
                <img className="rounded-xl" width="70" src={article.urlToImage} alt="" />
            </div>
        </a>
    )
}
```



## Widgets
```diff_jsx:Widgets.jsx

import { SearchIcon } from "@heroicons/react/outline";
import News from "./News";
+ import { useState } from "react";

+ export default function Widgets({ newsResults }) {
+ const [articleNum, setArticleNum] = useState(3);
  return (
    <div className="xl:w-[600px] hidden lg:inline ml-8 space-y-5">
      <div className="w-[90%] xl:w-[75%] sticky top-0 bg-white py-1.5 z-50">
        <div className="flex items-center p-3 rounded-full bg-red-300 relative">
          <SearchIcon className="h-5 z-50 text-gray-500" />
          <input
            className="absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700 focus:shadow-lg focus:bg-white bg-gray-100 "
            type="text"
            placeholder="Search Twitter"
          />
        </div>
      </div>

+      <div className="text-gray-700 space-y-3 bg-gray-100 rounded-xl pt-2 w-[90%] xl:w-[75%]">
+        <h4 className="font-bold text-xl px-4">What's happening</h4>
+        {newsResults.slice(0, articleNum).map((article) => (
+          <News key={article.title} article={article} />
+        ))}
+        <button onClick={()=>setArticleNum(articleNum + 3)}  className="text-blue-300 pl-4 pb-3 hover:text-blue-400">
+          Show more
+        </button>
+      </div>
    </div>
  );
}

```

## page/index
```diff_jsx:index.jsx

import Head from 'next/head'
import Image from 'next/image'
import Sidebar from '../components/Sidebar';
import Feed from '../components/Feed';
import Widgets from '../components/Widgets';


- export default function Home() {
+ export default function Home({ newsResults }) {
  return (
    <div>
      <Head>
        <title>Twitter Clone</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-      <main className="flex min-h-screen max-w-7xl mx-auto">
+      <main className="flex min-h-screen mx-auto">
        {/* Header */}

        {/* Sidebar */}
        <Sidebar />


        {/* Feed */}
        <Feed/>
        {/* Modal */}
-        <Widgets />
+        <Widgets newsResults={newsResults.articles} />
      </main>
    </div>
  )
}

+ export async function getServerSideProps() {
+  const newsResults = await fetch(
+    "https://saurav.tech/NewsAPI/top-headlines/category/business/us.json"
+  ).then((res) => res.json());
+  return {
+    props: {
+      newsResults,
+    },
+  };
}
```





# 参考

## css

## javascript

## Next.js

### SSR

https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/080c7e86-0c1f-ee60-1e8f-05bc15bcf8a5.png)


## React

## firebase

## その他


### NewAPI top-headline

https://saurav.tech/NewsAPI/

#### パラメーター

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/edded219-46ad-63f2-3322-8354df497553.png)


#### レスポンス（Postmanで確認）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c92ceacf-003a-92d9-8ccf-0ca98c3b2819.png)




Udemy

73. Create the news section of the widgets component

https://www.udemy.com/course/react-js-tutorial/learn/lecture/32461766?start=60#overview

githubコミット分

https://github.com/RYA234/twitter-clone/commit/cb1dd57e258206d7697550b4415b67211b4a932d