Introduction
Next JS/TS Snipets for VScode
Designed to be simple, short and powerfull
Table of Contents
Explanation
The snippets are a combination of:
n nextnp next pagessp server side propssp static propsspth static paths
Contributing
Feel free to open a pull request if you to add a snippet, suggest a change, fix a bug or anything else.
Typescript snippets
np - nextPagenpssp - nextPageServerSidePropsnpsp - nextPageStaticPropsnpspth - nextPageStaticPathsnssp - nextServerSidePropsnsp - nextStaticPropsnspth - nextStaticPathsnip - nextInitialPropsnimg - nextImagenapp - nextAppndoc - nextDocumentnapi - nextApinmid - nextMiddleware
np - nextPage
import { NextPage } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export default FileName
npssp - nextPageServerSideProps
import { NextPage, GetServerSideProps } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {}
}
}
export default FileName
npsp - nextPageStaticProps
import { NextPage, GetStaticProps } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {},
}
}
export default FileName
npspth - nextPageStaticPaths
import { NextPage, GetStaticPaths } from 'next'
interface Props {}
const FileName: NextPage<Props> = ({}) => {
return <div></div>
}
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
export default FileName
nssp - nextServerSideProps
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {}
}
}
nsp - nextStaticProps
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {},
}
}
nspth - nextStaticPaths
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
nip - nextInitialProps
FileName.getInitialProps = async (ctx) => {
return {
}
}
nimg - nextImage
<Image src="" alt="" />
napp - nextApp
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
ndoc - nextDocument
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument
napi - nextApi
import type { NextApiRequest, NextApiResponse } from 'next'
interface Data {}
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
}
nmid - nextMiddleware
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
}
export const config = {
matcher: '/about/:path*',
}
Javascript snippets
np - nextPagenpssp - nextPageServerSidePropsnpsp - nextPageStaticPropsnpspth - nextPageStaticPathsnssp - nextServerSidePropsnsp - nextStaticPropsnspth - nextStaticPathsnip - nextInitialPropsnimg - nextImagenapp - nextAppndoc - nextDocumentnapi - nextApinmid - nextMiddleware
np - nextPage
const FileName = ({}) => {
return <div></div>
}
export default FileName
npssp - nextPageServerSideProps
const FileName = ({}) => {
return <div></div>
}
export const getServerSideProps = async (ctx) => {
return {
props: {}
}
}
export default FileName
npsp - nextPageStaticProps
const FileName = ({}) => {
return <div></div>
}
export const getStaticProps = async (ctx) => {
return {
props: {},
}
}
export default FileName
npspth - nextPageStaticPaths
const FileName = ({}) => {
return <div></div>
}
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
export default FileName
nssp - nextServerSideProps
export const getServerSideProps = async (ctx) => {
return {
props: {}
}
}
nsp - nextStaticProps
export const getStaticProps = async (ctx) => {
return {
props: {},
}
}
nspth - nextStaticPaths
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
}
}
nip - nextInitialProps
FileName.getInitialProps = async (ctx) => {
return {
}
}
nimg - nextImage
<Image src="" alt="" />
napp - nextApp
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
ndoc - nextDocument
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument
napi - nextApi
export default async function handler(req, res) {
}
nmid - nextMiddleware
import { NextResponse } from 'next/server'
export async function middleware(request) {
}
export const config = {
matcher: '/about/:path*',
}
