Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b0dad3b

Browse files
Working with nextjs
1 parent 9239524 commit b0dad3b

File tree

9 files changed

+5585
-0
lines changed

9 files changed

+5585
-0
lines changed

‎first-next/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.next

‎first-next/components/navBar.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Link from 'next/link';
2+
const NavBar = () => {
3+
const styles = {
4+
display: "flex",
5+
backgroundColor: "grey",
6+
justifyContent: "space-between",
7+
padding: "1rem"
8+
}
9+
return(
10+
<div style={styles}>
11+
<Link href="/">
12+
<a>Home</a>
13+
</Link>
14+
<Link href="/about">
15+
<a>About</a>
16+
</Link>
17+
<Link href="/contact">
18+
<a>Contact</a>
19+
</Link>
20+
</div>
21+
)
22+
}
23+
24+
export default NavBar;

‎first-next/package-lock.json‎

Lines changed: 5439 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎first-next/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "first-next",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "next",
8+
"build": "next build",
9+
"start": "next start"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"dependencies": {
15+
"axios": "^0.19.0",
16+
"next": "^8.1.0",
17+
"react": "^16.8.6",
18+
"react-dom": "^16.8.6"
19+
}
20+
}

‎first-next/pages/_app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import App, { Container } from 'next/app';
3+
import NavBar from '../components/navBar';
4+
class MyApp extends App {
5+
static async getInitialProps({ Component, ctx }) {
6+
let pageProps = {};
7+
8+
if (Component.getInitialProps) {
9+
pageProps = await Component.getInitialProps(ctx);
10+
}
11+
12+
return { pageProps };
13+
}
14+
15+
render() {
16+
const { Component, pageProps } = this.props;
17+
return (
18+
<Container>
19+
<NavBar />
20+
<Component {...pageProps} />
21+
</Container>
22+
);
23+
}
24+
}
25+
26+
export default MyApp;

‎first-next/pages/about.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
const AboutPage = () => {
3+
console.log("ABOUT PAGE");
4+
return(
5+
<div>
6+
<h1>This is the about Page!!</h1>
7+
</div>
8+
)
9+
}
10+
11+
export default AboutPage;

‎first-next/pages/contact.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const ContactPage = () => (
3+
<div>
4+
<h1>This is the Contact Page!!</h1>
5+
</div>
6+
);
7+
8+
export default ContactPage;

‎first-next/pages/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, {Component} from 'react';
2+
import MyApp from './_app';
3+
import axios from 'axios';
4+
import Link from 'next/link';
5+
/*class Index extends Component{
6+
static async getInitialProps(){
7+
console.log("FETCH");
8+
}
9+
render(){
10+
return(
11+
<h1>Index Page</h1>
12+
)
13+
}
14+
}*/
15+
const Index = ({posts}) => {
16+
return(
17+
<div>
18+
19+
<h1>Index Page</h1>
20+
{posts.map(post => (
21+
<li key={post.id}>
22+
<Link href={`/post?id=${post.id}`} as={`/p/${post.id}`}><a>{post.title}</a></Link>
23+
</li>
24+
))}
25+
</div>
26+
)
27+
}
28+
Index.getInitialProps = async() => {
29+
// https://jsonplaceholder.typicode.com/posts
30+
const res = await axios.get("https://jsonplaceholder.typicode.com/posts")
31+
const {data} = res;
32+
return {posts: data}
33+
}
34+
export default Index

‎first-next/pages/post.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// import {withRouter} from 'next/router';
2+
import axios from 'axios';
3+
const Post = ({id, comments}) => (
4+
<div>
5+
<h1>Comments for post id: {id}</h1>
6+
{comments.map(comment => (
7+
<div key={comment.id}>
8+
<h5>{comment.email}</h5>
9+
<p>{comment.body}</p>
10+
</div>
11+
))}
12+
</div>
13+
);
14+
15+
Post.getInitialProps = async({query}) =>{
16+
const res = await axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${query.id}`)
17+
const {data} = res;
18+
return {...query, comments: data};
19+
}
20+
// export default withRouter(Post);
21+
export default Post;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /